Help
This is a live editor for Graphviz graphs, based on d3-graphviz (which is based on hpcc-js-wasm's port of Graphviz to WASM.
You can find the source code
here.
Use this menu button to restore the initial example
Use this menu button to download the canvas as an SVG, with
any icons you use (and the Monoid font) embedded in the file
Use this menu button to download the whole "project" as a
ZIP archive. That is, any image assets you use, a DOT file you can compile locally and the image
exported in SVG format
As soon as you start modifying the Graphviz source it will be saved in your browser's "localStorage", it will be there when you refresh.
The editor offers some primitive autocomplete for Graphviz attributes, node shapes and some other properties, as
well as for the AWS diagram assets and and FontAwesome glyphs.
You can't add your own images (yet? If it's ever possible, it won't be easy), but can use HTML style labels and add remote
images, but those can't be exported as SVG, but only as DOT file (with the archive option).
Before exporting make sure all the diagram is visible, it will make things easier. Once exported you
can tweak it with any SVG editor (like Affinity
Designer or Inkscape)
Sometimes the live preview will ignore some style or shape attribute (like changing from solid to
dotted, has happened several times). The best way to get out of it is to copy the DOT code, refresh
the page and pasting it again.
This project would not be possible without other available assets or code: