Colorful Mermaid Diagrams Test

Details

Raw Data

{
  "id": "a1601bfb-4fb3-4fea-b886-cf6835d733a5",
  "type": "general",
  "status": "completed",
  "title": "Colorful Mermaid Diagrams Test",
  "description": "Testing Mermaid.js diagrams with custom colors and styling",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Segoe UI',sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 20px 0;\">🎨 Colorful Mermaid Diagrams</h2>\n\n<p style=\"color:#9ca3af;margin-bottom:24px;\">Mermaid diagrams with custom colors using <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">style</code> directives and <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">classDef</code>.</p>\n\n<!-- Colorful Sequence Diagram -->\n<h3 style=\"color:#3b82f6;margin:24px 0 12px 0;\">1. Sequence Diagram - Colored Participants</h3>\n<div id=\"seq-color\" style=\"background:#2d2d2d;padding:16px;border-radius:8px;min-height:200px;\">\n  <div style=\"color:#888;\">Loading...</div>\n</div>\n<script>\n(function() {\n  const definition = `\n%%{init: {'theme': 'dark', 'themeVariables': { 'actorBkg': '#3b82f6', 'actorTextColor': '#fff', 'actorBorder': '#2563eb', 'signalColor': '#22c55e', 'signalTextColor': '#e0e0e0' }}}%%\nsequenceDiagram\n    participant U as 👤 User\n    participant K as 🖥️ Konui\n    participant S as ⚡ Konsole\n    participant C as 🤖 Claude\n    \n    rect rgb(59, 130, 246, 0.2)\n    Note over U,K: Frontend Layer\n    U->>K: Submit prompt\n    end\n    \n    rect rgb(34, 197, 94, 0.2)\n    Note over K,S: Backend Layer\n    K->>S: POST /api/session\n    S->>C: Spawn process\n    end\n    \n    rect rgb(249, 115, 22, 0.2)\n    Note over C: AI Processing\n    C-->>S: SSE stream\n    end\n    \n    S-->>K: Forward events\n    K-->>U: Display output\n`;\n  window.renderMermaidDiagram('seq-color', definition);\n})();\n</script>\n\n<!-- Colorful State Diagram -->\n<h3 style=\"color:#22c55e;margin:24px 0 12px 0;\">2. State Machine - Colored States</h3>\n<div id=\"state-color\" style=\"background:#2d2d2d;padding:16px;border-radius:8px;min-height:200px;\">\n  <div style=\"color:#888;\">Loading...</div>\n</div>\n<script>\n(function() {\n  const definition = `\n%%{init: {'theme': 'dark'}}%%\nstateDiagram-v2\n    [*] --> Idle\n    Idle --> Streaming: send_prompt\n    Streaming --> Working: sse_event\n    Working --> Working: activity\n    Working --> Stalled: no_events_10s\n    Stalled --> Working: event_received\n    Working --> Polling: stream_end\n    Polling --> Idle: kontask_found\n    Streaming --> Disconnected: connection_lost\n    Disconnected --> Idle: reconnect\n    \n    classDef green fill:#22c55e,stroke:#16a34a,color:#000\n    classDef yellow fill:#f59e0b,stroke:#d97706,color:#000\n    classDef red fill:#ef4444,stroke:#dc2626,color:#fff\n    classDef blue fill:#3b82f6,stroke:#2563eb,color:#fff\n    classDef gray fill:#6b7280,stroke:#4b5563,color:#fff\n    \n    class Idle gray\n    class Streaming blue\n    class Working green\n    class Stalled yellow\n    class Polling blue\n    class Disconnected red\n`;\n  window.renderMermaidDiagram('state-color', definition);\n})();\n</script>\n\n<!-- Colorful Flowchart -->\n<h3 style=\"color:#f59e0b;margin:24px 0 12px 0;\">3. Flowchart - Service Architecture</h3>\n<div id=\"flow-color\" style=\"background:#2d2d2d;padding:16px;border-radius:8px;min-height:200px;\">\n  <div style=\"color:#888;\">Loading...</div>\n</div>\n<script>\n(function() {\n  const definition = `\n%%{init: {'theme': 'dark'}}%%\nflowchart LR\n    subgraph Frontend[\"🌐 Frontend\"]\n        UI[Konui<br/>:8666]\n    end\n    \n    subgraph Backend[\"⚙️ Backend Services\"]\n        KG[Kongate<br/>:8010]\n        KI[Konimage<br/>:8000]\n        KS[Konsole<br/>:8020]\n    end\n    \n    subgraph Storage[\"💾 Storage\"]\n        DB[(SQLite)]\n        FS[/Files/]\n    end\n    \n    UI --> KG\n    UI --> KI\n    UI --> KS\n    KG --> FS\n    KI --> FS\n    KS --> DB\n    \n    style UI fill:#8b5cf6,stroke:#7c3aed,color:#fff\n    style KG fill:#22c55e,stroke:#16a34a,color:#000\n    style KI fill:#f59e0b,stroke:#d97706,color:#000\n    style KS fill:#3b82f6,stroke:#2563eb,color:#fff\n    style DB fill:#06b6d4,stroke:#0891b2,color:#000\n    style FS fill:#ec4899,stroke:#db2777,color:#fff\n    \n    style Frontend fill:#1e3a5f,stroke:#3b82f6,color:#fff\n    style Backend fill:#1e3a3f,stroke:#22c55e,color:#fff\n    style Storage fill:#3a1e3f,stroke:#8b5cf6,color:#fff\n`;\n  window.renderMermaidDiagram('flow-color', definition);\n})();\n</script>\n\n<!-- Pie Chart -->\n<h3 style=\"color:#8b5cf6;margin:24px 0 12px 0;\">4. Pie Chart - Token Usage</h3>\n<div id=\"pie-color\" style=\"background:#2d2d2d;padding:16px;border-radius:8px;min-height:200px;\">\n  <div style=\"color:#888;\">Loading...</div>\n</div>\n<script>\n(function() {\n  const definition = `\n%%{init: {'theme': 'dark', 'themeVariables': {'pie1': '#3b82f6', 'pie2': '#22c55e', 'pie3': '#f59e0b', 'pie4': '#ef4444', 'pieStrokeColor': '#1e1e1e', 'pieOuterStrokeColor': '#1e1e1e'}}}%%\npie showData\n    title Token Distribution\n    \"Input Tokens\" : 45\n    \"Output Tokens\" : 25\n    \"Cache Read\" : 20\n    \"Cache Write\" : 10\n`;\n  window.renderMermaidDiagram('pie-color', definition);\n})();\n</script>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-top:24px;\">\n<h4 style=\"margin:0 0 12px 0;color:#fff;\">🎨 Color Techniques Used</h4>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;color:#9ca3af;\">\n<li><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">%%{init: {'themeVariables': {...}}}%%</code> - Global theme colors</li>\n<li><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">style NodeId fill:#color</code> - Individual node styling</li>\n<li><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">classDef name fill:#color</code> - Reusable style classes</li>\n<li><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:4px;\">rect rgb(r,g,b,a)</code> - Colored regions in sequence diagrams</li>\n</ul>\n</div>\n</div>",
    "requestedAt": "2026-01-07T10:32:00Z",
    "requestId": "917cda7e-a3b0-4b85-845d-4f5c68f041e4",
    "choices": [
      {
        "label": "Looks great!",
        "value": "The colorful Mermaid diagrams look great",
        "primary": true
      },
      {
        "label": "More examples",
        "value": "Show more Mermaid diagram examples with different styles",
        "primary": false
      }
    ],
    "turnTiming": {
      "totalMs": 35837,
      "ttfeMs": 53,
      "thinkingMs": 35784,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T12:57:55.956Z",
  "updatedAt": "2026-01-07T12:58:01.638Z",
  "requestId": "917cda7e-a3b0-4b85-845d-4f5c68f041e4",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "ui",
    "mermaid"
  ],
  "targetUser": "claude"
}