Mermaid.js Examples

Mermaid is integrated into Purple Tree 3. Quite basic for now.

Mind Map

mindmap
  root((Central Idea))
    Concept A
      Sub-point 1
      Sub-point 2
    Concept B
      Sub-topic I
      Sub-topic II
        Related Detail
    Connecting Principle

Decision Flowchart

graph TD
    A[Analyze Request] --> B{Valid Input?}
    B -- Yes --> C(Process Data)
    C --> D{Critical Alert?}
    D -- Yes --> E[Notify Administrator]
    D -- No --> F[Log Entry]
    E --> G[Resolve Issue]
    F --> H[Archive Record]
    B -- No --> I[Report Error]
    I --> H
    G --> H

Entity Connection Diagram

graph LR
    Core[Main Interest] --> Dependency_A(Required Factor)
    Core --> Dependency_B(Supporting Idea)
    Dependency_A --> Related_Subtopic1
    Dependency_A --> Related_Subtopic2
    Dependency_B --> Related_Subtopic3
    Related_Subtopic1 --- CommonGround[Shared Principle]
    Related_Subtopic3 --- CommonGround

Sequential Flow

sequenceDiagram
    actor Researcher
    participant Library
    participant Database
Researcher->>Library: Request Access
alt Access Granted
    Library-->>Researcher: Provide Credentials
    Researcher->>Database: Query Archives
    Database-->>Researcher: Return Results
else Access Denied
    Library-->>Researcher: "Notification & Reason"
end

Hierarchical Structure

graph TD
    Root[Total System] --> BranchA[Component Group A]
    Root --> BranchB[Component Group B]
    BranchA --> Leaf1[Detailed Unit 1]
    BranchA --> Leaf2[Detailed Unit 2]
    BranchB --> Leaf3[Detailed Unit 3]
    BranchB --> SubBranchB1[Subcategory B1]
    SubBranchB1 --> Leaf4[Detailed Unit 4]

State Diagram

stateDiagram-v2
    [*] --> Germination: New Thought
    Germination --> Researching: Active Interest
    Researching --> Draft: Knowledge Gathered
state Researching {
    [*] --> Reading
    Reading --> NoteTaking
    NoteTaking --> Reading
}

Draft --> Review: Self-Correction
Review --> Published: Vector Image Created
Review --> Researching: Gaps Found
Published --> [*]