1
0
Fork
You've already forked ascii-graphalizer
0
Generate an ascii node edge graph.
  • JavaScript 100%
2025年09月30日 23:07:38 +02:00
docs/assets example graphalizer graph 2025年09月04日 17:07:46 +02:00
ascii-graphalizer.js force javascript to deep copy arguments via dc function prototype 2025年09月30日 23:07:38 +02:00
README.md change phrase of left and right nodes 2025年09月13日 18:34:58 +02:00

ascii-graphalizer

Generate an ascii node edge graph.

Demo

https://random-wizard.neocities.org/ascii-graphalizer/

Greedy Grabber, Right Lane Backtracker

GG-RLB: Simple method to generate lines edges to connect nodes. GG-RLB uses a hierachical tree layout with directory like indention for the main structure. Then, GG-RLB uses an orthogonal edge routing strategy in a separate ASCII canvas to show loops and cross links. It is a hybrid between a tree display (like unix tree) and a grid based edge routing layout (like simplified BioFabric layout).

GG-RLB uses the order of the dot file description of "node -- node" to make a determination about how to draw the graph. It grabs the first encounter of a node and uses it as the source for what to display first. Left hand and right hand nodes are treated differently, depending on if the node was already encountered before.

After gathering the data, creating the graph is a three stage process.

First Stage: make a hierarchal graph of the nodes that respects the parent child tree. Indent as the nodes go down the tree. Use the special loop data to note when a loop is coming in to the node, and when a loop is going out of the node. Make those special loops head off to the right edge of the graph.

Second Stage: use the loop data to create a separate graph that has incoming and outgoing links along the left side, then draw each loop as a seperate vertical lane along the right. Some care needs to be taken to draw when a loop line has crossed another loop line.

Third Stage: stitch together the left graph to the right graph.

Example

Graphviz uses the following dot file notation as an example for a neato layout.

graph G {
	fontname="Helvetica,Arial,sans-serif"
	node [fontname="Helvetica,Arial,sans-serif"]
	edge [fontname="Helvetica,Arial,sans-serif"]
	layout=neato
	run -- intr;
	intr -- runbl;
	runbl -- run;
	run -- kernel;
	kernel -- zombie;
	kernel -- sleep;
	kernel -- runmem;
	sleep -- swap;
	swap -- runswap;
	runswap -- new;
	runswap -- runmem;
	new -- runmem;
	sleep -- runmem;
}

Running the dot file through graphviz neato results in the following diagram.

Graphviz Gallery Example of Process Diagram

Running the dot file through GG-RLB results in the following diagram.

Ascii Graphalizer Example of Process Diagram

Since "run -- intr" is the first line, GG-RLB uses run as the root node. The first loop is the run, intr, runbl triad of nodes.