Diagram Tools

mdedit.ai supports three text-based diagram families. Keep the source in Markdown, preview it while you write, and export a standalone image when you need one for a README, presentation, or document.

What you need	Best fit	Why
Flowcharts, sequence diagrams, ERDs, timelines, and state charts	Mermaid	Broad syntax and support across many Markdown platforms
Dependency graphs, service topology, and layout-heavy networks	Graphviz/DOT	Strong automatic layout and edge routing
Knowledge maps, outlines, and planning trees	Markmap	Turns nested Markdown into a visual mind map

Mermaid

Use a mermaid code fence for common technical diagrams:

```mermaid
flowchart LR
    Draft --> Review --> Publish
```

Learn the syntax in the Mermaid diagrams guide, then use the format that fits your destination:

PNG is a dependable choice for slides and general sharing. SVG stays sharp at any size and works well in technical documentation. WebP is useful when file size matters on the web. PDF is convenient for print and document workflows.

Graphviz and DOT

Use a graphviz or dot code fence when graph layout is the difficult part:

```dot
digraph Services {
    Web -> API
    API -> Database
    API -> Worker
}
```

Choose PNG for broad compatibility or SVG when the diagram must remain crisp when resized.

Markmap

Use a markmap code fence to turn a Markdown outline into a mind map:

```markmap
# Launch
## Research
## Build
## Review
## Publish
```

A practical workflow

Pick the diagram family that matches the information you are showing.
Start with the smallest useful source block and check it in preview.
If Mermaid does not render, run the source through the validator before adding more detail.
Export to PNG for broad compatibility or SVG for scalable documentation graphics. Use WebP for smaller web assets or PDF for print workflows.
Keep the original text source next to the exported asset so future changes remain reviewable.

If a preview still shows code instead of a diagram, follow diagram troubleshooting.

Math Equations Mermaid Diagrams