Mermaid examples

Sequence diagrams, flowcharts, ER diagrams, class diagrams, state machines, and Gantt charts from Mermaid syntax.

OAuth2 Token Flow
mermaid neutral sequence
bashtokyo night
$ vhiz diagram oauth2-flow.mmd -s 550 --theme neutral page https://vhiz.dev/diagram_LvQVLulr artifact https://vhiz.dev/diagram_LvQVLulr/v/1/screen550x671@2x.png format png size 550×671 @2x cost 1 credit balance 29
OAuth2 sequence diagram
CI/CD Pipeline
mermaid dark transparent bg
bashmonokai
$ vhiz diagram ci-pipeline.mmd -s 450 --theme dark --background transparent page https://vhiz.dev/diagram_qtAfkDTG artifact https://vhiz.dev/diagram_qtAfkDTG/v/1/screen450x1212@2x.png format png size 450×1212 @2x cost 1 credit balance 28
CI/CD Pipeline flowchart
Project Management Schema
mermaid forest ER diagram
bashsolarized
$ vhiz diagram schema.mmd -s 500 --theme forest page https://vhiz.dev/diagram_JS3bA2Q3 artifact https://vhiz.dev/diagram_JS3bA2Q3/v/1/screen500x1318@2x.png format png size 500×1318 @2x cost 1 credit balance 27
ER diagram for project management
Class Diagram
mermaid default class
bashnord
$ vhiz diagram classes.mmd -s 550 --theme default page https://vhiz.dev/diagram_xS86H5gZ artifact https://vhiz.dev/diagram_xS86H5gZ/v/1/screen550x1093@2x.png format png size 550×1093 @2x cost 1 credit balance 41
Class diagram
Document Review State Machine
mermaid dark state
bashdracula
$ vhiz diagram review-states.mmd -s 500 --theme dark page https://vhiz.dev/diagram_BSbsR54s artifact https://vhiz.dev/diagram_BSbsR54s/v/1/screen500x1183@2x.png format png size 500×1183 @2x cost 1 credit balance 40
State machine diagram
Release Schedule
mermaid forest gantt
bashgruvbox
$ vhiz diagram schedule.mmd -s 700 --theme forest page https://vhiz.dev/diagram_I0OHhxhU artifact https://vhiz.dev/diagram_I0OHhxhU/v/1/screen700x762@2x.png format png size 700×762 @2x cost 1 credit balance 39
Gantt chart release schedule