Graphviz diagrams now sourced as aspects available throughout the lineup. We expect to refine the translation as we understand the workflows this enables. github 
Available now in npm as version 0.11.6-0.
Graph objects are plain JavaScript objects, similar to JSON Graph or the Dagre JSON serialization, but are specifically designed for working with Graphviz. viz-js , jgf , dagre
# Examples
The dot language has many features that simplify drawing.
{Mom Dad} -> Ward -> {Pat Chris}
digraph family { {Mom Dad} -> Ward -> {Pat Chris} }
A node's label is used, if present, otherwise the name.
list -> {may jun jul}
digraph pages { list [label="Dojo Practices\n2025"] may [label="All Maps\nand Markers"] jun [label="Exploring\nHTML Scripts"] jul [label="Graphviz\nto Solo"] list -> {may jun jul} }
Algorithmic drawings are also sourced.
LINKS HERE -> NODE
DOT digraph LINKS HERE -> NODE STATIC digraph {"Graphviz to Solo" -> "About Graphviz Plugin" "Graphviz to Solo" -> "About Solo Plugin" "Graphviz to Solo" -> "Solo Lineup Browser"}
Careful styling may never survive sourcing.
node [fillcolor=gold]
strict digraph flows { rankdir=LR node [shape=box style=filled] node [fillcolor=palegreen] gviz [label="Graphviz\nPlugin"] solo [label="Solo\nPlugin"] walk [label="Mech\nWALK"] html [label="Html\nPlugin"] assets [label="Assets\nPlugin"] frame [label="Frame\nPlugin"] node [fillcolor=gold] aspect [label="aspect\nsource"] node [fillcolor=lightblue] down [label="download\nto upload"] script [label="HTML\nScript"] arrow [label="Arrows\nWeb App"] page [label="Click to\nView Page"] algo [label="algorithmic\ndrawing"] line [label="Lineup\nDrawing"] next [label="Preview\nNext\nDiagram"] jsonp [label="Assets\njsonp"] smap [label="Neighbors\nsitemaps"] ghost [label="Ghost\nPages"] any [label="Enrich\nAny SVG"] line->algo -> gviz ->aspect -> solo -> ghost -> solo -> page any -> html -> page jsonp -> solo next->algo smap -> walk -> aspect arrow -> assets -> any script -> frame -> down -> assets ->jsonp }
Nodes can have type to be used by Solo.
Publish [type=Script] Catalog [type=Data]
digraph files { Index [type=Script] Publish [type=Script] Catalog [type=Data] Index -> Catalog [label=write] Publish -> Catalog [label=read] }
# Notes
More pages with aspects-source: - Roots Story Shown Group - Lineup Diagram - Graphviz Customizations
View these examples with Solo Lineup Browser.
// tip -- view sourced aspects [...document.querySelectorAll('.aspect-source')] .map(e => e.aspectData()).flat()