Bring existing diagrams
Flowcharts (graph/flowchart), sequence diagrams and state diagrams use the widely adopted text syntax, including diagrams written for Mermaid, so existing diagrams render unchanged. Set vhyxchart.renderCompatibleFences in VS Code, or pass { compatibleFences: true } to autoRender, to also render those existing code fences.
What stays the same
- All node shapes, edge kinds (
--> -.-> ==> --- --o --x <--> ~~~), labels,&,subgraph,classDef,class,:::,style. - Sequence arrows, activations, notes,
loop/alt/else/opt/par/and/critical/break/rect,autonumber. stateDiagram-v2with[*].
What you add
graph TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
scenario Decide
A -> B : payment
B -> C
C is active
wait 600ms
C -> D : One
D is done