DiagramForge

Text in, SVG out. A .NET library and CLI that turns plain-text diagram descriptions into clean, self-contained SVG — no browser, no JavaScript runtime, no headless Chrome.

Representative snapshot fixtures from the E2E suite. Click any thumbnail to open the full-size SVG.

<!-- markdownlint-disable MD033 --> <h3>Diagram Types</h3>

DiagramForge currently supports more than a dozen diagram types across Mermaid, the Conceptual DSL, and the Wireframe DSL. This gallery is representative, not complete, and includes a few icon-enabled examples. See Supported syntax, Conceptual DSL, and Wireframe DSL below for the full set and syntax details.

<table cellpadding="12" width="100%"> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-flowchart-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-flowchart-icons.expected.svg" alt="Flowchart with icons" height="96" /> </a> <br /> _{Flowchart + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-block.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-block.expected.svg" alt="Block diagram" height="96" /> </a> <br /> _Block </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-sequence.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-sequence.expected.svg" alt="Sequence" height="96" /> </a> <br /> _Sequence </td> </tr> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-architecture-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-architecture-icons.expected.svg" alt="Architecture with icons" height="96" /> </a> <br /> _{Architecture + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-mindmap.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-mindmap.expected.svg" alt="Mindmap" height="96" /> </a> <br /> _Mindmap </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-timeline.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-timeline.expected.svg" alt="Timeline" height="96" /> </a> <br /> _Timeline </td> </tr> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-venn-two-set.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-venn-two-set.expected.svg" alt="Venn diagram" height="96" /> </a> <br /> _Venn </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-xychart.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/mermaid-xychart.expected.svg" alt="XY chart" height="96" /> </a> <br /> _{XY Chart} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-cycle-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-cycle-icons.expected.svg" alt="Conceptual cycle with icons" height="96" /> </a> <br /> _{Conceptual Cycle + Icons} </td> </tr> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-matrix-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-matrix-icons.expected.svg" alt="Conceptual matrix with icons" height="96" /> </a> <br /> _{Conceptual Matrix + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-pillars-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-pillars-icons.expected.svg" alt="Conceptual pillars with icons" height="96" /> </a> <br /> _{Conceptual Pillars + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-pyramid.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-pyramid.expected.svg" alt="Conceptual pyramid" height="96" /> </a> <br /> _{Conceptual Pyramid} </td> </tr> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-funnel-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-funnel-icons.expected.svg" alt="Conceptual funnel with icons" height="96" /> </a> <br /> _{Conceptual Funnel + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-radial-icons.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-radial-icons.expected.svg" alt="Conceptual radial with icons" height="96" /> </a> <br /> _{Conceptual Radial + Icons} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-snake-presentation.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-snake-presentation.expected.svg" alt="Snake timeline (Presentation)" height="96" /> </a> <br /> _{Snake Timeline} </td> </tr> <tr> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-snake-dracula.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/conceptual-snake-dracula.expected.svg" alt="Snake timeline (Dracula)" height="96" /> </a> <br /> _{Snake Timeline (Dracula)} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-form.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-form.expected.svg" alt="Wireframe form dialog" height="96" /> </a> <br /> _{Wireframe Form} </td> <td align="center" valign="top" width="33%"> <a href="https://github.com/jongalloway/DiagramForge/blob/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-dashboard.expected.svg"> <img src="https://raw.githubusercontent.com/jongalloway/DiagramForge/main/tests/DiagramForge.E2ETests/Fixtures/wireframe-dashboard.expected.svg" alt="Wireframe dashboard (Dracula)" height="96" /> </a> <br /> _{Wireframe Dashboard (Dracula)} </td> </tr> </table> <h3>Built-in Themes</h3>

This theme gallery is also a representative sample rather than the full catalog. DiagramForge ships with 28 built-in themes: default, zinc-light, zinc-dark, dark, neutral, forest, presentation, prism, angled-light, angled-dark, github-light, github-dark, nord, nord-light, dracula, tokyo-night, tokyo-night-storm, tokyo-night-light, catppuccin-latte, catppuccin-mocha, `solar