graph TDv0.9.4

什么是流程图?

分支流程、决策树、请求路径。 The most-used diagram type — and the entry point for most teams adopting diagrams-as-code.

在编辑器中打开 →即用模板

graph TD

何时使用

Use a 流程图 when…

Branching processes with decision points

Request paths and onboarding flows

Decision trees in design docs

语法基础

The minimal syntax

Copy this and you have a working 流程图. Build from here.

flowchart.mmd

flowchart TD
    Start([User opens app]) --> Auth{Logged in?}
    Auth -- yes --> Home[Home feed]
    Auth -- no --> Login[Login screen]
    Login --> Auth
    Home --> Compose[Compose post]
    Compose --> Publish[(Database)]
    Publish --> Home

常见写法

Patterns worth memorizing

Subgraphs

Group related nodes inside a `subgraph` block to visually cluster a service or layer.

Link styling

Use `linkStyle 3 stroke:#888,stroke-width:1px` to dim edges that are less important.

ELK renderer

Add `%%{init: {"flowchart": {"defaultRenderer": "elk"}}}%%` for cleaner layouts on large graphs.

常见坑点

The things that will trip you up

Mermaid silently ignores misspellings — these are the failures we see most.

01
Nodes can't contain `(`, `)`, or `[` in labels — wrap them in `"…"`.
02
TD vs LR is a single-character change (`TD` top-down, `LR` left-right) — most non-trivial graphs read better as LR.
03
Mermaid silently ignores misspelled directives; if nothing changes, double-check the spelling.