Skip to main content
VhyxChart

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-v2 with [*].

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