Styling

vizzy parses standard Mermaid styling inside mermaid fences — there’s no new syntax to learn.

flowchart LR
  a[Start] --> b[Work] --> c[Done]
  classDef default fill:#F3F4F6,stroke:#9CA3AF
  classDef ok fill:#DCFCE7,stroke:#16A34A,color:#14532D
  class c ok
  style b stroke-width:3px,stroke-dasharray:5 4
  b:::ok

What you can write

• style <id> <props> — style one node.
• classDef <name> <props> + class <id1>,<id2> <name> — define and apply a reusable class. classDef default styles every node. id:::name is shorthand for class.

Props (Mermaid names)

Prop	Effect
fill	Background color
stroke	Border color
color	Text color
stroke-width	Border width, e.g. 2px
stroke-dasharray	Dashed border, e.g. 5 4

Colors are standard names or #hex — never custom tokens.

Merge order

When several rules touch the same node, later wins:

classDef default   <   class / :::   <   inline style   <   vizzy-fence override

Limits

Mermaid styling applies inside flowchart / graph fences. To tint a node in a sequence, class, ER, or state diagram, use a vizzy-fence style override instead. linkStyle (edge styling) is not yet supported.