🧩

Mermaid Demo

This staging page tests native Mermaid diagrams, source controls, responsive layout and independent error handling. Ordinary code remains a code block.

ℹ️ Each diagram is authored in a native Notion Code block with its language set to Mermaid. Use the diagram source control to inspect the original definition.

Mermaid Diagrams

Flowchart

Diagram source 
flowchart LR
    Input["Input <tag> & data"] --> Notion["Notion code block"]
    Notion --> Local["Local Notion"]
    Local --> Site["Rendered website"]
Flowchart: native source to website

Sequence Diagram

Diagram source 
sequenceDiagram
    participant Author
    participant Notion
    participant LocalNotion as Local Notion
    participant Browser
    Author->>Notion: Save Mermaid code
    LocalNotion->>Notion: Pull the page
    Notion-->>LocalNotion: Native blocks
    LocalNotion-->>Browser: HTML and runtime assets
    Browser->>Browser: Render the diagram
Sequence: source, rendering and display

Class Diagram

Diagram source 
classDiagram
    class VisualNode
    class DocumentBlock
    class CodeBlock
    VisualNode <|-- DocumentBlock
    VisualNode <|-- CodeBlock
    DocumentBlock o-- CodeBlock : Children
Class relationships in the visual model

State Diagram

Diagram source 
stateDiagram-v2
    [*] --> Authored
    Authored --> Pulled
    Pulled --> Rendered
    Rendered --> Published
    Published --> [*]
State diagram: publication stages

Code and Error Controls

Ordinary Code

This C# example must remain literal code. Its angle brackets and ampersand must not become HTML elements. 


var markup = "<span>&value</span>";
Console.WriteLine(markup);

Expected Syntax Error

The following definition is intentionally invalid. The page should show a local failure message and retain its source without preventing the remaining diagrams from rendering.

Diagram source 
flowchart LR
    Broken["This bracket never closes"
Intentional invalid Mermaid definition

Valid Diagram After the Error

Diagram source 
flowchart LR
    Isolated["Invalid block isolated"] --> Good["This diagram still renders"]
A valid diagram after an invalid block