# Charts
> Generate a mermaid flowchart showing trigger relationships and flows. Use when the user wants to visualize triggers.
- Skill: `nikolaj-lat/charts` (Agent Skill)
- Install (CLI): `npx skillmds@latest add nikolaj-lat/charts`
- Raw SKILL.md: https://api.skillmd.com/api/skills/nikolaj-lat/charts/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: nikolaj-lat (https://skillmd.com/u/nikolaj-lat)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/nikolaj-lat/charts
---
# 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
```mermaid
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
Description
Details"]
ITEM2["2: Name
Description
Details"]
end
NODE1 --> DECISION
RESULT_A --> SIDEBAR
```
## Node Types
- **Start nodes**: `["Label"]` - rectangles
- **Decision nodes**: `{"Question?"}` - diamonds
- **Multi-line content**: Use `
` for line breaks
- **Connections**: `-->|"label"| ` for labeled edges
## Analyzing Triggers
1. Identify trigger categories (setup, gameplay, context, etc.)
2. Find decision points (conditions that branch)
3. Map cause → effect relationships
4. Group related triggers into subgraphs
5. Create sidebar for reference data (characters, locations, items)
## HTML Template
```html
Trigger Chart
Game Flow
flowchart TD
%% Content here
```
## 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
Description
Type: Value"]
ITEM2["2: Name
Description
Type: Value"]
end
```
**Gameplay section**:
```
subgraph GAMEPLAY["🔴 DURING GAMEPLAY"]
EVENT1["📋 EVENT NAME
Description line 1
Description line 2"]
EVENT2["⚔️ ANOTHER EVENT
More details"]
end
```
## Steps
1. Read triggers file (default: `tabs/triggers.json`)
2. Categorize triggers by purpose (setup, selection, gameplay, context)
3. Identify decision points and branching conditions
4. Extract reference data (characters, locations, items) for sidebars
5. Build flowchart with labeled subgraphs
6. Connect sections with meaningful flow
7. Write to `stuff/trigger-chart.html`
8. Open in browser