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
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
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
classDiagram
class VisualNode
class DocumentBlock
class CodeBlock
VisualNode <|-- DocumentBlock
VisualNode <|-- CodeBlock
DocumentBlock o-- CodeBlock : Children
Class relationships in the visual model
State Diagram
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.
C#
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.
flowchart LR
Broken["This bracket never closes"
Intentional invalid Mermaid definition
Valid Diagram After the Error
flowchart LR
Isolated["Invalid block isolated"] --> Good["This diagram still renders"]
