← Back to Kontasks

Mermaid.js Diagram Support Added

Architecture diagrams now render dynamically in kontask cards

✓ Completed
on 7 Jan 2026, 10:54 pm

Output

✓ Mermaid.js Diagram Support Added

Architecture diagrams now render dynamically in kontask cards using Mermaid.js v11.

🏗️ Live Architecture Diagram Demo

Loading diagram...

📝 Implementation Details

Library Mermaid.js v11 (CDN)
Size ~50KB gzipped (loaded once)
Theme Dark (pre-configured)
Helper window.renderMermaidDiagram(elementId, definition)

📋 Supported Diagram Types

Flowcharts Sequence State Machines ER Diagrams Class Diagrams Gantt Charts Pie Charts Journey Maps

💻 Usage Example

<div id="my-diagram" style="min-height:200px;"></div>
<script>
(function() {
  const def = `graph LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Do thing]
    B -->|No| D[Other thing]`;
  window.renderMermaidDiagram('my-diagram', def);
})();
</script>

📚 Documentation Added

Full usage guide added to CLAUDE.md under "Interactive Components → Mermaid.js"

What's Next?

The diagram above should render automatically. If not, refresh the page once to load the Mermaid.js library.

Quick Actions

Original Request

No layout configured

Details

Type General
Status Completed
Scope vibetools
Tags kontasksuidiagramsmermaid
Created 7 Jan 2026, 10:54 pm
Updated 7 Jan 2026, 10:54 pm
Created By claude

🔗 Git Commit

e05a5bc4

Raw Data

{
  "id": "16fda878-349a-48c3-8442-acc405823f3c",
  "type": "general",
  "status": "completed",
  "title": "Mermaid.js Diagram Support Added",
  "description": "Architecture diagrams now render dynamically in kontask cards",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n<h2 style=\"color:#22c55e;margin:0 0 16px 0;\">✓ Mermaid.js Diagram Support Added</h2>\n\n<p style=\"color:#9ca3af;margin-bottom:20px;\">Architecture diagrams now render dynamically in kontask cards using Mermaid.js v11.</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">🏗️ Live Architecture Diagram Demo</h3>\n<div id=\"demo-arch\" style=\"background:#1e1e1e;padding:16px;border-radius:6px;min-height:200px;\">\n<div style=\"color:#888;\">Loading diagram...</div>\n</div>\n</div>\n\n<script>\n(function() {\n  const definition = `\ngraph TD\n  subgraph Hub[\"greatVibe.local HUB\"]\n    WQ[Work Queue]\n    AR[Agent Registry]\n    SC[Session Channels]\n  end\n\n  Hub -->|WebSocket| S1[gvShell Linux]\n  Hub -->|WebSocket| S2[gvShell Windows]\n  Hub -->|WebSocket| S3[gvShell postgres]\n\n  S1 --> L1[Local Storage]\n  S2 --> L2[Local Storage]\n  S3 --> L3[Local Storage]\n\n  style Hub fill:#1e3a5f,stroke:#3b82f6\n  style S1 fill:#22c55e,stroke:#16a34a\n  style S2 fill:#3b82f6,stroke:#2563eb\n  style S3 fill:#f59e0b,stroke:#d97706\n`;\n  setTimeout(function() {\n    if (window.renderMermaidDiagram) {\n      window.renderMermaidDiagram('demo-arch', definition);\n    } else {\n      document.getElementById('demo-arch').innerHTML = '<div style=\"color:#f59e0b;\">Refresh page to load Mermaid.js</div>';\n    }\n  }, 100);\n})();\n</script>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">📝 Implementation Details</h3>\n<table style=\"width:100%;border-collapse:collapse;font-size:0.9rem;\">\n<tr style=\"background:#252525;\">\n<td style=\"padding:10px;border:1px solid #444;color:#9ca3af;\">Library</td>\n<td style=\"padding:10px;border:1px solid #444;\">Mermaid.js v11 (CDN)</td>\n</tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #444;color:#9ca3af;\">Size</td>\n<td style=\"padding:10px;border:1px solid #444;\">~50KB gzipped (loaded once)</td>\n</tr>\n<tr style=\"background:#252525;\">\n<td style=\"padding:10px;border:1px solid #444;color:#9ca3af;\">Theme</td>\n<td style=\"padding:10px;border:1px solid #444;\">Dark (pre-configured)</td>\n</tr>\n<tr>\n<td style=\"padding:10px;border:1px solid #444;color:#9ca3af;\">Helper</td>\n<td style=\"padding:10px;border:1px solid #444;\"><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">window.renderMermaidDiagram(elementId, definition)</code></td>\n</tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">📋 Supported Diagram Types</h3>\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;\">\n<span style=\"background:#3b82f6;color:#fff;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Flowcharts</span>\n<span style=\"background:#22c55e;color:#fff;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Sequence</span>\n<span style=\"background:#8b5cf6;color:#fff;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">State Machines</span>\n<span style=\"background:#f59e0b;color:#000;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">ER Diagrams</span>\n<span style=\"background:#ef4444;color:#fff;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Class Diagrams</span>\n<span style=\"background:#06b6d4;color:#000;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Gantt Charts</span>\n<span style=\"background:#ec4899;color:#fff;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Pie Charts</span>\n<span style=\"background:#84cc16;color:#000;padding:4px 10px;border-radius:4px;font-size:0.85rem;\">Journey Maps</span>\n</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;\">💻 Usage Example</h3>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;overflow-x:auto;font-size:0.85rem;color:#e5c07b;\"><code>&lt;div id=\"my-diagram\" style=\"min-height:200px;\"&gt;&lt;/div&gt;\n&lt;script&gt;\n(function() {\n  const def = `graph LR\n    A[Start] --&gt; B{Decision}\n    B --&gt;|Yes| C[Do thing]\n    B --&gt;|No| D[Other thing]`;\n  window.renderMermaidDiagram('my-diagram', def);\n})();\n&lt;/script&gt;</code></pre>\n</div>\n\n<div style=\"background:#1a365d;padding:16px;border-radius:6px;border-left:4px solid #3b82f6;margin-bottom:16px;\">\n<h4 style=\"color:#fff;margin:0 0 8px 0;\">📚 Documentation Added</h4>\n<p style=\"color:#9ca3af;margin:0;\">Full usage guide added to <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">CLAUDE.md</code> under \"Interactive Components → Mermaid.js\"</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n<h4 style=\"margin:0 0 8px 0;color:#fff;\">What's Next?</h4>\n<p style=\"color:#9ca3af;margin:0;\">The diagram above should render automatically. If not, refresh the page once to load the Mermaid.js library.</p>\n</div>\n</div>",
    "choices": [
      {
        "label": "Test another diagram",
        "value": "Create a kontask with a different Mermaid diagram type (sequence diagram, state machine, or ER diagram) to test the implementation",
        "primary": true
      },
      {
        "label": "Show sequence diagram",
        "value": "Create a kontask showing a sequence diagram example for API request flow"
      },
      {
        "label": "Done",
        "value": "The Mermaid.js implementation is complete and working"
      }
    ],
    "requestedAt": "2026-01-07T10:47:00Z",
    "requestId": "0a01a4e6-fed1-4ce4-ba49-db9a0573b8b7",
    "commitSha": "e05a5bc4"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T12:54:14.336Z",
  "updatedAt": "2026-01-07T12:54:14.576Z",
  "requestId": "0a01a4e6-fed1-4ce4-ba49-db9a0573b8b7",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "ui",
    "diagrams",
    "mermaid"
  ],
  "targetUser": "claude"
}
DashboardReportsKontasksFlowsDecisionsSessionsTelemetryLogs + Go