awesome-skills/mermaid-syntax-skill/mermaid-syntax-skill

flowchart LR
    A["Text with (parentheses)"]
    B["Text with / or \ slashes"]
    C["Colon: in text"]

flowchart LR
    node1["end"]           %% Safe: quoted with different ID
    node2["default"]       %% Safe: "default" is also reserved
    node3["End"]           %% Safe: capitalized

flowchart LR
    orderNode[Order]    %% Good: full word
    oNode[O-Node]       %% Bad: might create circle edge

sequenceDiagram
    A->>B: Value#59; Key#59; Data

flowchart LR
    %% This is a valid comment
    A --> B

flowchart TB
    subgraph "Title with<br/>line break"
        A --> B
    end

flowchart LR
    A --> B
    linkStyle 0 stroke-dasharray: 5\,5

---
config:
  theme: forest
---
flowchart LR
    A --> B

mindmap
    root((Comparison))
        Less than 10    %% Instead of "< 10"
        Greater than 5  %% Instead of "> 5"

classDiagram
    class MyClass {
        +getData() Map~String, Object~
    }

flowchart LR
    %% BAD: linking to both system AND sub-system breaks
    %% A --> system
    %% B --> sub-system
 
    %% GOOD: link to nodes inside, not subgraph itself
    A --> service1
    B --> service2
 
    subgraph system
        subgraph sub-system
            service1
            service2
        end
    end

flowchart LR
    A --> B
    subgraph sub [My Subgraph]
        direction TB  %% Ignored if C links outside!
        C --> D
    end
    B --> C  %% This external link forces LR direction

flowchart LR
    %% BROKEN in v11.0-11.4: shows arrow instead of line
    A --- B
 
    %% Workaround: use explicit arrow and style
    C --> D
    linkStyle 0 stroke:#333,stroke-width:2px

flowchart LR
    %% v10: plain text, v11: renders as Markdown
    A[**bold** and _italic_]
 
    %% Problem: underscores in text become italic
    B["file_name_here"]  %% Use quotes to prevent issues

---
config:
  maxTextSize: 100000  %% IGNORED! Secure setting
---
flowchart LR
    A --> B

flowchart LR
    A --> B
    %% BAD: hex color as last attribute
    %% linkStyle 0 stroke-width:4px,stroke:#FF69B4
 
    %% GOOD: hex color NOT last, or use color name
    linkStyle 0 stroke:#FF69B4,stroke-width:4px
    %% OR: linkStyle 0 stroke-width:4px,stroke:hotpink

classDiagram
    namespace MyPackage {
        class ClassA
        class ClassB
    }
    %% Relationships OUTSIDE namespace block
    ClassA --> ClassB
    note for ClassA "This note is outside namespace"

architecture-beta
    %% BAD: service db[Cloud-Name]  (hyphen breaks)
    %% GOOD: use underscore or spaces
    service db(database)[Cloud_Name]

%%{init: {"look": "handDrawn"}}%%
flowchart LR
    A[Sketchy] --> B[Style]

sequenceDiagram
    A <<->> B: Bidirectional
    A <<-->> B: Bidirectional dotted

%%{init: {
    "theme": "dark",
    "flowchart": {"curve": "linear"}
}}%%
flowchart LR
    A --> B

flowchart TB
    subgraph GroupName["Display Title"]
        direction LR
        A --> B
    end
    C --> GroupName

sequenceDiagram
    participant A as Alice
    actor B as Bob
    A->>B: Hello

sequenceDiagram
    A->>+B: Request
    B-->>-A: Response

sequenceDiagram
    A->>B: Request
    activate B
    B-->>A: Response
    deactivate B

sequenceDiagram
    alt Success
        A->>B: OK
    else Failure
        A->>B: Error
    end
 
    opt Optional
        A->>B: Maybe
    end
 
    loop Every minute
        A->>B: Ping
    end
 
    par Parallel
        A->>B: Task1
    and
        A->>C: Task2
    end

sequenceDiagram
    Note right of A: Single line note
    Note over A,B: Spanning note

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }

classDiagram
    Customer "1" --> "*" Order : places

stateDiagram-v2
    [*] --> State1
    State1 --> State2: transition
    State2 --> [*]

stateDiagram-v2
    state Parent {
        [*] --> Child1
        Child1 --> Child2
    }

stateDiagram-v2
    state choice <<choice>>
    State1 --> choice
    choice --> State2: if condition
    choice --> State3: else
 
    state fork <<fork>>
    State4 --> fork
    fork --> State5
    fork --> State6

%% BAD - breaks parsing
A[Click here (optional)]
B[User: Admin]
 
%% GOOD - quoted text
A["Click here (optional)"]
B["User: Admin"]

%% BAD - breaks diagram
A --> end
subgraph end
 
%% GOOD - quoted or capitalized
A --> End
A --> ["end"]
subgraph "End Phase"

%% BAD - treated as line break
A->>B: key;value;data
 
%% GOOD - HTML entity
A->>B: key#59;value#59;data

%% BAD - quote conflict
A["Say "Hello""]
 
%% GOOD - use single quotes inside
A["Say 'Hello'"]
%% Or use HTML entity
A["Say #quot;Hello#quot;"]

%% BAD - colon breaks node text
A[Step 1: Initialize]
 
%% GOOD - quoted
A["Step 1: Initialize"]

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    section Phase 1
        Task A :a1, 2024-01-01, 30d
        Task B :after a1, 20d

pie title Distribution
    "A" : 40
    "B" : 30
    "C" : 30

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop