Can you make a flowchart in Markdown?

Not with standard Markdown alone — it has no diagram syntax. You add one by writing the flowchart as text inside a fenced code block tagged with a diagram language such as mermaid, dot, or d2, and rendering it with an editor or platform that supports those blocks.

Which flowchart syntax should I use in Markdown?

Mermaid is the most widely supported and the easiest to read, and it renders natively on GitHub. Graphviz (DOT) handles large graphs better because its layout algorithms minimise edge crossings. D2 produces the most polished output and uses one syntax across diagram types.

Do Markdown flowcharts work on GitHub?

GitHub renders Mermaid code blocks natively in READMEs, issues, and pull requests. Graphviz and D2 blocks are not rendered by GitHub and show as plain code, so use Mermaid when the target is GitHub.

How do I export a Markdown flowchart to PDF?

Paste the Markdown into MarkdownToPrettyPDF and export. The diagram is rendered to SVG and embedded in the PDF as vector art, so it stays sharp at any zoom level and when printed.

Markdown Flowchart — Diagrams as Text

Write a flowchart as plain text inside your Markdown, watch it render live, and export it to PDF or HTML. Mermaid, Graphviz (DOT), and D2 are all supported — no drawing tool, no dragging boxes around.

Because the diagram is text, it lives in your repository next to the code, diffs cleanly in pull requests, and never goes stale the way an exported PNG does.

Try a flowchart in the editor

How to Make a Flowchart in Markdown

Standard Markdown has no flowchart syntax. What every modern toolchain does instead is overload the fenced code block: you tag a block with a diagram language, and the renderer turns its contents into a picture rather than printing it as code. The three worth knowing are Mermaid, Graphviz, and D2.

You describe the nodes and the arrows between them; the layout engine decides where everything goes. Below is the same flowchart written in all three.

Mermaid — the most portable

```mermaid
flowchart TD
    A[Start] --> B{Valid input?}
    B -- Yes --> C[Process]
    B -- No --> D[Show error]
    C --> E([Done])
    D --> E
```

Graphviz (DOT) — best for large graphs

```dot
digraph flow {
    rankdir=TB;
    A [label="Start", shape=ellipse];
    B [label="Valid input?", shape=diamond];
    C [label="Process", shape=box];
    D [label="Show error", shape=box];

    A -> B;
    B -> C [label="yes"];
    B -> D [label="no"];
}
```

D2 — the most polished output

```d2
start: Start {shape: oval}
check: Valid input? {shape: diamond}
process: Process
error: Show error

start -> check
check -> process: yes
check -> error: no
```

Open all three in the editor Read the full comparison

Which One Should You Use?

Tool	Best for	Renders on GitHub
Mermaid	READMEs, docs, anything that must render elsewhere	Yes
Graphviz (DOT)	Dense graphs where automatic layout matters most	No
D2	Architecture diagrams you want to look designed	No

Exporting a Markdown Flowchart to PDF

Diagrams are rendered to SVG and embedded in the PDF as vector art, so a flowchart stays sharp at any zoom level and prints cleanly — unlike a screenshot pasted into a document. Page breaks are handled so a diagram is not sliced in half across two pages.

The same document exports to self-contained HTML if you would rather publish it on the web.

Markdown Flowchart — Diagrams as Text

How to Make a Flowchart in Markdown

Which One Should You Use?

Exporting a Markdown Flowchart to PDF

Related Guides