---
title: "Diagrams: Mermaid + ASCII"
url: https://mdfy.app/mdfy-ex-diag
updated: 2026-05-12T07:46:28.470Z
source: "mdfy.app"
---
# Diagrams: Mermaid + ASCII

mdfy renders diagrams from two source dialects so you can paste either and get the same picture.

## Mermaid

Use a fenced block with `mermaid`:

```mermaid
flowchart LR
  Doc[(Doc)] --> Bundle((Bundle))
  Bundle --> Hub[/Hub/]
  Hub --> AI[Any AI]
  AI -. cites .-> Doc
```

Sequence diagrams work the same way:

```mermaid
sequenceDiagram
  participant U as You
  participant M as mdfy
  participant AI as Claude/ChatGPT
  U->>M: Publish doc
  M-->>U: Permanent URL
  U->>AI: Paste URL
  AI->>M: Fetch /raw/<id>
  M-->>AI: Clean markdown
```

State, class, gantt, ER, journey, mindmap, timeline — all supported.

## ASCII

Paste an ASCII diagram and mdfy renders it as a stylized container.

```
┌─────────┐     ┌──────────┐     ┌──────┐
│  Doc    │ --> │  Bundle  │ --> │  Hub │
└─────────┘     └──────────┘     └──────┘
                     │
                     ▼
                 [ Any AI ]
```

Click any rendered ASCII block to convert it to Mermaid via the "asciitomd" action — the resulting code is editable in the visual canvas.

## Why both

ASCII is what LLMs default to producing. Mermaid is what scales to complex graphs. mdfy keeps both in the same toolbox so you don't have to choose at the moment of writing.