charts

name: charts description: Generate a mermaid flowchart showing trigger relationships and flows. Use when the user wants to visualize triggers. context: fork agent: charts

Generate a mermaid flowchart from triggers.json. Output to stuff/trigger-chart.html.

Design Principles

Organized sections: Group related triggers into labeled subgraphs
Decision trees: Use diamond nodes {} for branching logic
Detailed nodes: Include descriptions, not just names
Visual hierarchy: Flow from top to bottom, sidebars for reference data
Emoji labels: Use icons to distinguish section types

Mermaid Structure

flowchart TD
    subgraph SECTION1["🎮 SECTION TITLE"]
        NODE1["Description"]
    end

    subgraph SECTION2["🔴 ANOTHER SECTION"]
        DECISION{"Question?"}
        DECISION -->|Option A| RESULT_A["Result A"]
        DECISION -->|Option B| RESULT_B["Result B"]
    end

    subgraph SIDEBAR["📋 REFERENCE DATA"]
        ITEM1["1: Name<br/>Description<br/>Details"]
        ITEM2["2: Name<br/>Description<br/>Details"]
    end

    NODE1 --> DECISION
    RESULT_A --> SIDEBAR

Node Types

Start nodes: ["Label"] - rectangles
Decision nodes: {"Question?"} - diamonds
Multi-line content: Use <br/> for line breaks
Connections: -->|"label"| for labeled edges

Analyzing Triggers

Identify trigger categories (setup, gameplay, context, etc.)
Find decision points (conditions that branch)
Map cause → effect relationships
Group related triggers into subgraphs
Create sidebar for reference data (characters, locations, items)

HTML Template

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Trigger Chart</title>
  <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  <style>
    body { background: #1a1a1a; padding: 40px; font-family: system-ui; color: #e0e0e0; }
    h1 { color: #fff; text-align: center; margin-bottom: 40px; }
    .mermaid { background: #252525; padding: 40px; border-radius: 12px; }
  </style>
</head>
<body>
  <h1>Game Flow</h1>
  <pre class="mermaid">
flowchart TD
    %% Content here
  </pre>
  <script>
    mermaid.initialize({
      startOnLoad: true,
      theme: 'dark',
      flowchart: { curve: 'basis', padding: 20, nodeSpacing: 50, rankSpacing: 60 }
    });
  </script>
</body>
</html>

Section Patterns

Game start:

subgraph START["🎮 GAME START"]
    BEGIN["Player Begins"]
end

Branching logic:

subgraph BRANCH["🔴 SECTION NAME"]
    QUESTION{"Condition?"}
    QUESTION -->|Yes| PATH_A["Result A"]
    QUESTION -->|No| PATH_B["Result B"]
end

Reference sidebar:

subgraph SIDEBAR["📋 REFERENCE"]
    ITEM1["1: Name<br/>Description<br/>Type: Value"]
    ITEM2["2: Name<br/>Description<br/>Type: Value"]
end

Gameplay section:

subgraph GAMEPLAY["🔴 DURING GAMEPLAY"]
    EVENT1["📋 EVENT NAME<br/>Description line 1<br/>Description line 2"]
    EVENT2["⚔️ ANOTHER EVENT<br/>More details"]
end

Steps

Read triggers file (default: tabs/triggers.json)
Categorize triggers by purpose (setup, selection, gameplay, context)
Identify decision points and branching conditions
Extract reference data (characters, locations, items) for sidebars
Build flowchart with labeled subgraphs
Connect sections with meaningful flow
Write to stuff/trigger-chart.html
Open in browser