Here we want to explore create beautiful graphs with the nodes being sourced for simple scv icons that we curate here. There are a number of options to explore - chagtp 
It looks like the pragmatic options open to us are to craft our own svg's and then add these to wiki. It looks possible to enhance the graphviz plugin to accept icons from wiki - so this is the longer term aim - but as a proof of concept we should directy create our own svgs.
# Directly Create SVG
I've done a number of experiments using this technique, which involves parsing the json output from graphviz to extract the geometry (eg using `-Tplain`, `-Tjson`), then directly drawing the graph within Livecode. The next step to generate svg directly is straight forwards.
digraph Composing { rankdir=LR; nodesep=0.25; ranksep=0.45; node [shape=box, fontname="Helvetica", fontsize=11, margin="0.06,0.04", style=filled, color="#9ca3af", penwidth=1.2]; edge [arrowsize=0.7, color="#9ca3af"]; // layout choices Lneato [label="Algorithmic Layout", fillcolor="#dcfce7", color="#16a34a"]; // ✅ done Lsfdp [label="Svg Icon Library", fillcolor="#dcfce7", color="#16a34a"]; // ✅ done Ldot [label="Hand Drawn Layout", fillcolor="#f0fdf4", color="#86efac"]; // 🟢 in progress // parsing (required) Parse [label="Parse Geometry", fillcolor="#fde68a", color="#d97706"]; // ⚙️ required // rendering choices Rsvg [label="Render SVG", fillcolor="#e9d5ff", color="#7c3aed"]; // ⭐ critical next Rmod [label="Modify Graphviz Plugin", fillcolor="#f0fdf4", color="#86efac"]; // 🟢 in progress (new meaning) Rcy [label="Render Cytoscape", fillcolor="#f0fdf4", color="#86efac"]; // 🟢 in progress // embedding (critical next) Embed [label="Embed in Wiki", fillcolor="#e9d5ff", color="#7c3aed"]; // ⭐ critical next // alignment { rank=same; Lneato; Lsfdp; Ldot } { rank=same; Rsvg; Rmod; Rcy } { rank=max; Embed } // flow Lneato -> Parse [color="#16a34a", penwidth=1.6]; Lsfdp -> Parse [color="#16a34a", penwidth=1.6]; Ldot -> Parse; Parse -> Rsvg [color="#7c3aed", penwidth=2.2]; // critical Parse -> Rmod; Parse -> Rcy; Rsvg -> Embed [color="#7c3aed", penwidth=2.2]; // critical Rmod -> Embed; Rcy -> Embed; }
This looks an attractive proposition as it can also be implmented directly in wasm for easier distirubution / use in wiki. The workflow would be something like:
# Other Options
# Gotchas (quick) * **Don’t** rely on raw `data:` inside DOT without pre-registering; Graphviz core treats `image=` as a filename. * Make sure the mini-SVG you embed has **`width`/`height`** (use `pt`, `px`, etc.), or pass sizes via the wrapper’s image registry. ([Graphviz][1]) * If you go the HTML-like label route (`label=<<IMG …>>`), Graphviz still expects a local path unless you pre-register the image in your wrapper.
# References
1. Image - graphviz.org
1. Svg data URI and Graphviz - stackoverflow
1. Interface: Image | @hpcc-js/wasm - github
1. Imagescale - graphviz.org
1. D3-graphviz - npmjs.com
1. Filling nodes in d3-graphviz - codepen.io
1. Type Alias: Format | @hpcc-js/wasm - gihub
1. Plain Text - graphviz.org