Diagram and AsciiDoc studio

Three editors with live previews. Everything renders in your browser; the only network requests fetch the rendering engines from the jsDelivr CDN the first time a tab is opened.

Graphviz

Write DOT on the left; the diagram redraws as you type (or press Cmd/Ctrl+Enter). This is the real Graphviz C library compiled to WebAssembly (hpcc-js/wasm), so every layout engine is here: dot (hierarchies), neato and fdp (spring models), sfdp (large graphs), circo (circular), twopi (radial), osage (clusters) and patchwork (treemaps). Besides the picture you can view the laid-out DOT (with node positions), xdot JSON, or plain-text layout — handy when you want Graphviz to do the layout and your own code to do the drawing.

Templates: architecture with clusters, a state machine, an ER diagram using HTML-like record labels, a dependency graph, a flowchart and a neural-network diagram.

Mermaid

Mermaid covers the diagrams people usually reach for PlantUML to draw — sequence, class, state, ER, Gantt — plus flowcharts, mind maps, timelines, pie charts and git graphs, with no Java server. Pick a theme (or match the site’s light/dark theme). Labels are drawn as SVG text so PNG export works.

AsciiDoc preview

A live preview of AsciiDoc using Asciidoctor.js — the same language this site and the book are written in. Diagram blocks render inline, just as asciidoctor-diagram does when the site is built:

.Blood flow through the heart
[graphviz, heart-flow, svg, layout=neato]
----
digraph { a -> b -> c }
----

[mermaid] blocks work the same way. [plantuml] and [ditaa] need a Java renderer, so the preview shows their source with a note.

If the document starts with a gitwebsite header (:type:, :date:, :areas: …) a card above the preview shows how the site will treat it — kind, status, areas and tags — and lists anything gw check would reject: an unknown type or area, a bad date, a tool without a category, and so on. Templates include a site article, a project update, a book chapter with diagrams and a tool page.

Export: SVG, PNG (2×) or the source file from the diagram tabs; standalone HTML (with the diagrams embedded as SVG and Asciidoctor’s default stylesheet) or .adoc from the preview.

⛶ Full screen (or F) gives the editor and the preview the whole screen — the browser’s full screen where it is allowed, otherwise a full-window layer (iPhone). In Fit the diagram is scaled to fill the preview; ◫ Panels hides the editor so the preview gets the whole width. Escape leaves.

Limits

The AsciiDoc preview runs in Asciidoctor’s secure mode: include:: directives are ignored and images are referenced relative to nothing, so they appear as broken links.
Styling approximates the site’s; the published page uses the site templates.
Very large graphs (thousands of nodes) can take a few seconds to lay out with dot; try sfdp.

Share link copies a URL that opens this tool exactly as you have it. Hand-written links work too: Graphviz ?dot=…&engine=neato, Mermaid ?mmd=…&theme=dark, AsciiDoc ?adoc=…. Rendered output is sanitised, so a shared diagram cannot run script on the page. For example ?dot=digraph%20%7B%20a%20-%3E%20b%20-%3E%20c%20%7D.

Works with

Graphviz

Mermaid

AsciiDoc preview

Limits

Sharing