Diagrammer
Live PreviewFast, interactive text-to-diagram visualizer for Mermaid, PlantUML, Graphviz, and D2. Pan & zoom smoothly, export sharp SVG/PNG, and share with a link.
Syntax Error in Diagram
Frequently Asked Questions
Everything you need to know about visualizing software architecture, workflows, and exporting diagrams.
Q: How does the live diagram preview work?
As you type or modify diagram code in the editor, Diagrammer automatically debounces your keystrokes (~350ms) and re-renders the diagram into an interactive SVG canvas. Mermaid diagrams are rendered 100% locally in your browser, while PlantUML and Graphviz utilize high-speed vector SVG generators.
Q: How do I use Pan and Zoom on the diagram canvas?
You can click and drag anywhere on the diagram canvas to pan/move around. Use your mouse scroll wheel to zoom in and out smoothly. You can also use the '+' and '-' buttons on the canvas toolbar, or click 'Reset Fit' to center and fit the entire diagram into view.
Q: Can I export my diagram for documentation or presentations?
Yes! Click the 'Export' dropdown in the top right to download crisp vector SVGs or high-resolution PNG images. You can also copy the raw SVG markup or the formatted Markdown code block ready to paste into GitHub, Notion, or your blog.
Q: How does the Share Link feature work?
Clicking 'Share Link' compresses and encodes your chosen diagram engine and source code directly into the URL hash (#). Anyone who opens that link will immediately see your exact diagram and code loaded without needing any server storage or account.
Q: Is my diagram code private and secure?
Yes! For Mermaid diagrams, all compilation and rendering happens 100% locally inside your web browser. When using external engines like PlantUML, only the diagram markup is converted to SVG over an encrypted HTTPS connection; no personal identifiers or account data are ever stored.