Mermaid TS

Examples

Minimal

flowchart()
  .link("hello", "world")
  .render()

flowchart LR
    hello --> world

Loading

Complex links

const a = node("fish")
const b = node("are")
const c = node("friends")

flowchart({ direction: 'TD' })
  .link(a, b, [a, c])
  .link(c, a)
  .render()

flowchart TD
    fish --> are --> fish & friends
    friends --> fish

Loading

More options

flowchart({ direction: 'LR' })
  .link(
    "a",
    { kind:'-.-', text: 'd' },
    ["b", "c"],
    {},
    ["d", "e"],
  )
  .render()

flowchart LR
    a -.- |d| b & c --> d & e

Loading

Flowchart TODO

• Shapes
• Node text (not id) & escaping
• The rest of the link syntax options
• Link lengths
• Subgraphs
• Styling

Other TODO

• sequence diagrams
• others