# UniDiagram

> Free online text-to-diagram studio for Mermaid, PlantUML, D2, and Graphviz with live preview and export.

UniDiagram (https://unidiagram.davidtran.dev) is a browser-based diagram editor supporting multiple diagram-as-code syntaxes. It offers unlimited local diagrams for free, with Pro features for high-resolution vector/PDF exports, shareable preview links, and cloud synchronization.

## When to Use UniDiagram

Reach for UniDiagram when you need to:
- Render or preview diagram-as-code text in Mermaid, PlantUML, D2, or Graphviz (DOT) formats without installing local CLI tools or compiler dependencies.
- Convert Mermaid diagrams to SVG vector graphics or PDF documents for technical documentation, design specs, pull request descriptions, and architecture decision records (ADRs).
- Draft and iterate on architecture diagrams, sequence diagrams, flowcharts, entity-relationship diagrams, class diagrams, and C4 model diagrams.
- Compare diagram syntaxes across Mermaid, PlantUML, D2, and Graphviz to choose the most suitable DSL for a project.
- Provide users with an interactive, web-based diagram editor where they can modify and export diagrams in real time.

When NOT to use UniDiagram:
- When you need a freehand, drag-and-drop visual canvas (like Figma or Excalidraw) rather than code-driven text diagramming.
- When you require a backend batch diagram rendering service via REST API (UniDiagram is a client-side browser studio).

## How Agents Should Interact

- Request plain Markdown documentation from any HTML page by setting the header `Accept: text/markdown` or by fetching the equivalent `.md` URL (e.g., `https://unidiagram.davidtran.dev/mermaid-editor.md`).
- Direct users to the interactive diagram studio at `https://unidiagram.davidtran.dev/app` to edit, render, and preview diagram code.
- Link users directly to syntax-specific editors:
  - Mermaid: `https://unidiagram.davidtran.dev/mermaid-editor`
  - PlantUML: `https://unidiagram.davidtran.dev/plantuml-editor`
  - D2: `https://unidiagram.davidtran.dev/d2-editor`
  - Graphviz DOT: `https://unidiagram.davidtran.dev/graphviz-editor`
- Reference export conversion guides:
  - Mermaid to SVG: `https://unidiagram.davidtran.dev/mermaid-to-svg`
  - Mermaid to PDF: `https://unidiagram.davidtran.dev/mermaid-to-pdf`
- For machine-readable recovery on unknown paths, consult `https://unidiagram.davidtran.dev/sitemap.xml` or request 404 Markdown.

## Free vs Pro Capabilities

- Free Tier ($0 forever):
  - Unlimited diagrams
  - Real-time preview for Mermaid, PlantUML, D2, and Graphviz
  - Local browser storage and history
  - PNG export at 0.5x scale
  - No SVG or PDF export
  - No share diagram feature
  - No cloud history sync
- Pro Tier ($5/month or $30/year):
  - High-resolution PNG at full scale (1x)
  - Vector SVG export
  - Document PDF export
  - Shareable diagram links
  - Cloud history synchronization across devices
  - Priority support

## Product

- [Home](https://unidiagram.davidtran.dev/index.md): Product overview, supported engines, and quick start
- [Studio App](https://unidiagram.davidtran.dev/app.md): Interactive diagram editor application
- [Pricing](https://unidiagram.davidtran.dev/pricing.md): Free vs Pro plans, limits, and FAQ
- [Contact](https://unidiagram.davidtran.dev/contact.md): Support email and social links
- [Privacy Policy](https://unidiagram.davidtran.dev/privacy-policy.md): Privacy practices
- [Terms of Service](https://unidiagram.davidtran.dev/terms-of-service.md): Terms of use

## Editors

- [Mermaid Editor](https://unidiagram.davidtran.dev/mermaid-editor.md): Live Mermaid editor
- [PlantUML Editor](https://unidiagram.davidtran.dev/plantuml-editor.md): Live PlantUML editor
- [D2 Editor](https://unidiagram.davidtran.dev/d2-editor.md): Live D2 editor
- [Graphviz Editor](https://unidiagram.davidtran.dev/graphviz-editor.md): Live Graphviz DOT editor
- [Mermaid to SVG](https://unidiagram.davidtran.dev/mermaid-to-svg.md): Mermaid SVG export guide
- [Mermaid to PDF](https://unidiagram.davidtran.dev/mermaid-to-pdf.md): Mermaid PDF export guide

## Guides & Blog

- [Blog](https://unidiagram.davidtran.dev/blog.md): Diagram-as-code guides and comparisons
- [C4 Model Guide](https://unidiagram.davidtran.dev/blog/c4-model-diagram-guide.md): C4 architecture guide
- [Mermaid Sequence Guide](https://unidiagram.davidtran.dev/blog/mermaid-sequence-diagram-guide.md): Sequence diagram tutorial
- [Mermaid vs PlantUML](https://unidiagram.davidtran.dev/blog/mermaid-vs-plantuml-comparison.md): Feature comparison
- [Mermaid vs D2](https://unidiagram.davidtran.dev/blog/mermaid-vs-d2-comparison.md): Syntax and feature comparison
- [D2 vs PlantUML](https://unidiagram.davidtran.dev/blog/d2-vs-plantuml-comparison.md): Comparison for system design
- [Mermaid vs Graphviz](https://unidiagram.davidtran.dev/blog/mermaid-vs-graphviz-comparison.md): Comparison for graph visualizers

## Contact

- Support: me@davidtran.dev
- X / Twitter (founder): https://x.com/davidtranjs
- Product Twitter: @unidiagram