feat(diagrams & charts): Mermaid + Chart.js native support (patterns 23-25)

patterns/23-mermaid-architecture.md

@@ -0,0 +1,130 @@
+# Pattern: Mermaid Architecture Diagram
+
+## When to Use
+
+Use this pattern when you need to visualize a system, service, or component architecture as a diagram that shows:
+
+- Modules, services, or components with their connections
+- Data flow between components (HTTP, events, queues)
+- Boundary markers (teams, environments, deployment units)
+- Interface points and protocol information
+
+Do **not** use this pattern for:
+- Code-level internal structure (use Module Map instead)
+- Workflows with decision points (use Process Workflow Flowchart)
+- Timeline-based visualizations (use Project Progress Deck)
+
+## Trigger Phrases
+
+- "architecture diagram"
+- "system diagram"
+- "service map"
+- "microservices diagram"
+- "component diagram"
+- "module architecture"
+
+## Artifact Structure
+
+```html
+<!-- Mermaid CDN + initialization -->
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({ startOnLoad: true, theme: 'default' });</script>
+
+<!-- Artifact metadata header -->
+<header>
+  <h1>Architecture: [System Name]</h1>
+  <p class="meta">Pattern: 23-mermaid-architecture | Purpose: [intended use]</p>
+</header>
+
+<!-- Mermaid diagram block -->
+<div class="mermaid">
+flowchart TB
+    subgraph frontend["Frontend"]
+        A[Browser App] --> B[API Gateway]
+    end
+    subgraph backend["Backend Services"]
+        B --> C[Auth Service]
+        B --> D[Core API]
+        D --> E[(Database)]
+        D --> F[Queue]
+    end
+    subgraph external["External Services"]
+        F --> G[Payment Provider]
+        F --> H[Email Service]
+    end
+    classDef data fill:#e1f5fe
+    classDef service fill:#fff3e0
+    class E,G,H data
+    class C,D,F service
+</div>
+
+<!-- Legend and evidence -->
+<section class="legend">
+  <h2>Legend</h2>
+  <ul>
+    <li><strong>Solid arrows</strong>: Synchronous HTTP calls</li>
+    <li><strong>Dashed arrows</strong>: Async/event-driven calls</li>
+  </ul>
+</section>
+
+<section class="evidence">
+  <h2>What I checked</h2>
+  <ul>
+    <li>Repository structure and main entry points</li>
+    <li>Service communication patterns (sync/async)</li>
+    <li>Database and external service dependencies</li>
+  </ul>
+</section>
+
+<section class="recommendation">
+  <h2>Recommendation</h2>
+  <p>[What this architecture enables and what risks exist]</p>
+</section>
+
+<section class="next-action">
+  <h2>Next action</h2>
+  <p>[What to do next with this understanding]</p>
+</section>
+
+<section class="save-decision">
+  <h2>Save decision</h2>
+  <p>[save/private/refresh/supersede/discard — why]</p>
+</section>
+```
+
+## Quality Dimensions
+
+The artifact should show:
+
+1. **Components clearly identified** — each module/service has a name and purpose
+2. **Connection types visible** — data flow direction and type (sync/async/external)
+3. **Boundary markers present** — logical groupings (team, environment, deployment unit)
+4. **Evidence of inspection** — what files/configs were reviewed
+5. **Recommendation early** — the insight should appear in the first 2000 characters
+6. **Next action clear** — what to do with this architecture understanding
+
+## Mermaid Syntax Tips
+
+- Use `flowchart TB` (top-bottom) or `flowchart LR` (left-right) depending on diagram shape
+- Use `[square brackets]` for rectangular nodes (processes)
+- Use `[(cylinder)]` for database nodes
+- Use `{diamond}` for decision nodes
+- Use `-->|` for arrows with labels
+- Use `---` for unlabeled connections
+- Use `subgraph name["label"]` for grouping
+- Use `classDef` to apply visual styles to node types
+
+## Validation
+
+The artifact must:
+
+1. Have a `<div class="mermaid">` block with valid Mermaid syntax
+2. Pass `audit-artifact.py` at 90+
+3. Render correctly when opened in a browser (Mermaid CDN loaded)
+4. Include evidence of what was inspected to build the diagram
+
+## Related Patterns
+
+- [04-module-map.md](../04-module-map.md) — Code-level module structure
+- [10-process-workflow-flowchart.md](../10-process-workflow-flowchart.md) — Decision-driven workflows
+- [09-architecture-diagram.md](../09-architecture-diagram.md) — Non-Mermaid architecture (CSS/SVG)

patterns/24-mermaid-flowchart.md

@@ -0,0 +1,84 @@
+# Pattern: Mermaid Process Flowchart
+
+## When to Use
+
+Use this pattern when you need to visualize a process, decision tree, or workflow as a diagram that shows:
+
+- Sequential steps in a process
+- Decision points (yes/no branches)
+- Parallel or conditional paths
+- Role or system responsible for each step
+
+Do **not** use this pattern for:
+- Static architecture showing components (use Mermaid Architecture Diagram)
+- Timeline-based work (use Project Progress Deck)
+- Code module relationships (use Module Map)
+
+## Trigger Phrases
+
+- "process flowchart"
+- "decision tree"
+- "workflow diagram"
+- "process map"
+- "flow diagram"
+- "user journey"
+
+## Artifact Structure
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({ startOnLoad: true });</script>
+
+<header>
+  <h1>Process: [Process Name]</h1>
+  <p class="meta">Pattern: 24-mermaid-flowchart | Purpose: [intended use]</p>
+</header>
+
+<div class="mermaid">
+flowchart TD
+    A([Start]) --> B{Decision: Is condition met?}
+    B -->|Yes| C[Action 1]
+    B -->|No| D[Action 2]
+    C --> E{Another decision?}
+    E -->|Continue| F[Action 3]
+    E -->|Stop| G([End])
+    F --> G
+    D --> G
+</div>
+
+<section class="evidence">
+  <h2>What I checked</h2>
+  <ul>
+    <li>[What process documents or systems were reviewed]</li>
+  </ul>
+</section>
+
+<section class="recommendation">
+  <h2>Key insight</h2>
+  <p>[What the process enables and where the risks are]</p>
+</section>
+
+<section class="next-action">
+  <h2>Next action</h2>
+  <p>[What to do with this process understanding]</p>
+</section>
+```
+
+## Mermaid Syntax Tips
+
+- `flowchart TD` for top-down, `LR` for left-right, `BT` for bottom-top
+- Use `{text}` for decision diamonds
+- Use `-->|` for labeled edges (arrows with text on the branch)
+- Use `([text])` for stadium/rounded nodes (start/end)
+- Use `[(text)]` for cylinder (database)
+
+## Validation
+
+1. `<div class="mermaid">` with valid syntax
+2. Passes `audit-artifact.py` at 90+
+3. Includes evidence of process inspection
+
+## Related Patterns
+
+- [10-process-workflow-flowchart.md](../10-process-workflow-flowchart.md) — CSS/SVG flowchart alternative
+- [23-mermaid-architecture.md](../23-mermaid-architecture.md) — System architecture with Mermaid

patterns/25-chart-dashboard.md

@@ -0,0 +1,118 @@
+# Pattern: Chart.js Data Dashboard
+
+## When to Use
+
+Use this pattern when you need to display data-driven visualizations that communicate:
+
+- Comparative metrics across options, features, or entities
+- Numeric scores with visual weight (bar charts, radar)
+- Distribution or composition data (what proportion of what)
+- Progress or completion metrics with visual clarity
+
+Do **not** use this pattern for:
+- Non-numeric comparisons (use Decision Deck)
+- Architecture or process diagrams (use Mermaid patterns)
+- Static information displays (use standard HTML tables)
+
+## Trigger Phrases
+
+- "dashboard"
+- "data visualization"
+- "chart"
+- "comparison chart"
+- "score comparison"
+- "metric comparison"
+- "radar chart"
+- "bar chart"
+
+## Artifact Structure
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+
+<header>
+  <h1>Dashboard: [Topic]</h1>
+  <p class="meta">Pattern: 25-chart-dashboard | Data sources: [what was used]</p>
+</header>
+
+<style>
+.chart-container { max-width: 800px; margin: 0 auto; }
+canvas { max-width: 100%; }
+</style>
+
+<section class="chart-section">
+  <h2>[Chart Title]</h2>
+  <div class="chart-container">
+    <canvas id="mainChart"></canvas>
+  </div>
+</section>
+
+<script>
+// Bar chart example
+const ctx = document.getElementById('mainChart').getContext('2d');
+new Chart(ctx, {
+  type: 'bar',
+  data: {
+    labels: ['Option A', 'Option B', 'Option C'],
+    datasets: [{
+      label: 'Score (0-100)',
+      data: [92, 78, 85],
+      backgroundColor: ['#16653422', '#92400e22', '#1d4ed822'],
+      borderColor: ['#166534', '#92400e', '#1d4ed8'],
+      borderWidth: 2
+    }]
+  },
+  options: {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      tooltip: { enabled: true }
+    }
+  }
+});
+</script>
+
+<section class="evidence">
+  <h2>What I checked</h2>
+  <ul>
+    <li>[What data sources or evidence were used]</li>
+  </ul>
+</section>
+
+<section class="recommendation">
+  <h2>Insight</h2>
+  <p>[What the data shows and what to do with it]</p>
+</section>
+
+<section class="export">
+  <button onclick="exportChartData()">Export chart data as JSON</button>
+</section>
+```
+
+## Chart.js Chart Types
+
+| Type | Use when | Key config |
+|------|----------|-----------|
+| bar | Comparing numeric scores | `labels`, `datasets[].data` |
+| line | Showing trends over time | `labels` = time periods, `datasets[].data` |
+| radar | Multi-dimensional comparison | Same as bar, circular layout |
+| doughnut | Showing composition/proportions | `datasets[].data` as proportions |
+
+## Data Validation
+
+The artifact must include valid Chart.js config:
+- `labels`: array of strings
+- `datasets`: array with at least one entry containing `data` (array of numbers)
+- `type`: one of 'bar', 'line', 'radar', 'doughnut', 'pie', 'scatter'
+
+## Validation
+
+1. Passes `audit-artifact.py` at 90+
+2. Includes `<canvas>` with valid Chart.js config
+3. Export button copies chart data as JSON
+4. Includes evidence of what data was used
+
+## Related Patterns
+
+- [14-research-comparison-map.md](../14-research-comparison-map.md) — Non-chart comparison
+- [11-technical-decision-deck.md](../11-technical-decision-deck.md) — Decision with scores