| 1e755c0 | | | 12 | "code": "%% =============================================\n%% MERMAID SYNTAX TUTORIAL\n%% Open the code pane (click Definition on the left)\n%% and read the comments to learn the syntax.\n%% Edit the code to see changes live!\n%% =============================================\n\n%% Lines starting with %% are comments, they do not render.\n\n%% -- DIAGRAM TYPE ---------------------------------\n%% The first line declares the diagram type.\n%% \"graph\" = flowchart. TD = top-down, LR = left-right.\ngraph TD\n\n%% -- NODES ----------------------------------------\n%% Bare text creates a rectangular node:\n%% MyNode\n%% Brackets set the display label:\n%% MyNode[\"Friendly Name\"]\n%% Different brackets = different shapes:\n%% [\"rectangle\"] (\"rounded\") {\"diamond\"}\n%% ((\"circle\")) [[\"subroutine\"]]\n\n%% -- ARROWS ---------------------------------------\n%% --> solid arrow\n%% -.-> dotted arrow\n%% ==> thick arrow\n%% Add a label with pipes: -->|\"label\"|\n\n%% -- SUBGRAPHS ------------------------------------\n%% Group nodes inside: subgraph Name[\"Title\"] ... end\n\n%% -- EXAMPLE: Coffee ordering flow ----------------\n\n Customer((\"Customer\"))\n\n subgraph Order[\"Place Order\"]\n Menu[\"Browse Menu\"] --> Choose{\"Pick drink\"}\n Choose -->|\"Espresso\"| Espresso[\"Espresso\"]\n Choose -->|\"Latte\"| Latte[\"Latte\"]\n Choose -->|\"Tea\"| Tea[\"Tea\"]\n end\n\n subgraph Prep[\"Preparation\"]\n direction LR\n Grind[\"Grind Beans\"] --> Brew[\"Brew\"]\n Brew --> Steam{\"Milk?\"}\n Steam -->|\"Yes\"| Foam[\"Steam & Foam\"]\n Steam -->|\"No\"| Skip[\"Skip\"]\n Foam --> Combine[\"Combine\"]\n Skip --> Combine\n end\n\n subgraph Serve[\"Pickup\"]\n Ready[\"Order Ready\"] --> Enjoy[\"Enjoy!\"]\n end\n\n Customer --> Menu\n Espresso --> Grind\n Latte --> Grind\n Tea -.->|\"different path\"| Ready\n Combine ==> Ready\n\n%% -- STYLING --------------------------------------\n%% style NodeId fill:#color,stroke:#color\n%% You can style subgraphs too.\n\n style Customer fill:#4d8a78,stroke:#3d7a68,color:#fff\n style Enjoy fill:#4d8a78,stroke:#3d7a68,color:#fff" |