kramme-visual-diagram

name	kramme:visual:diagram
description	Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, flowchart, schema, or any visual explanation of technical concepts. Also use proactively when about to render a large ASCII table (4+ rows and 3+ columns) — present it as a styled HTML page instead.
argument-hint	[topic or description]
disable-model-invocation	false
user-invocable	true
kramme-platforms	["claude-code","codex"]

Visual Diagram

Generate self-contained HTML files for technical diagrams, visualizations, and data tables. When the user explicitly asked for a visual, open the result in the browser; when you're rendering a table proactively (see below), write the file and share the path but don't auto-launch a browser. Never fall back to ASCII art when this skill is loaded.

Arguments: "$ARGUMENTS"

Proactive table rendering. When you're about to present tabular data as an ASCII box-drawing table in the terminal (comparisons, audits, feature matrices, status reports, any structured rows/columns), generate an HTML page instead. The threshold: a table with 4+ rows and 3+ columns belongs in the browser — smaller tables are fine to leave inline. Don't wait for the user to ask — render it as HTML and tell them the file path. Because the user didn't request a visual here, write the file and report the path but don't auto-open a browser tab; reserve auto-open for explicit diagram requests. You can still include a brief text summary in the chat, but the table itself should be the HTML page.

Resource paths: Resolve assets/... and references/... relative to this SKILL.md file. Do not assume a host-specific plugin root environment variable.

Workflow

1. Think (5 seconds, not 5 minutes)

Before writing HTML, commit to a direction. Don't default to "dark theme with blue accents" every time.

Who is looking? A developer understanding a system? A PM seeing the big picture? A team reviewing a proposal? This shapes information density and visual complexity.

What type of diagram? Architecture, flowchart, sequence, data flow, schema/ER, state machine, mind map, data table, timeline, or dashboard. Each has distinct layout needs and rendering approaches (see Diagram Types below).

What aesthetic? Pick one and commit:

• Monochrome terminal (green/amber on black, monospace everything)
• Editorial (serif headlines, generous whitespace, muted palette)
• Blueprint (technical drawing feel, grid lines, precise)
• Neon dashboard (saturated accents on deep dark, glowing edges)
• Paper/ink (warm cream background, hand-drawn feel, sketchy borders)
• Hand-drawn / sketch (Mermaid handDrawn mode, wiggly lines, informal whiteboard feel)
• IDE-inspired (borrow a real color scheme: Dracula, Nord, Catppuccin, Solarized, Gruvbox, One Dark)
• Data-dense (small type, tight spacing, maximum information)
• Gradient mesh (bold gradients, glassmorphism, modern SaaS feel)

Vary the choice each time. If the last diagram was dark and technical, make the next one light and editorial. The swap test: if you replaced your styling with a generic dark theme and nobody would notice the difference, you haven't designed anything.

2. Structure

Read the reference template before generating. Don't memorize it — read it each time to absorb the patterns.

• For text-heavy architecture overviews (card content matters more than topology): read assets/architecture.html
• For flowcharts, sequence diagrams, ER, state machines, mind maps: read assets/mermaid-flowchart.html
• For data tables, comparisons, audits, feature matrices: read assets/data-table.html

For CSS/layout patterns and SVG connectors, read references/css-patterns.md.

For pages with 4+ sections (reviews, recaps, dashboards), also read references/responsive-nav.md for section navigation with sticky sidebar TOC on desktop and horizontal scrollable bar on mobile.

Choosing a rendering approach:

Diagram type	Approach	Why
Architecture (text-heavy)	CSS Grid cards + flow arrows	Rich card content (descriptions, code, tool lists) needs CSS control
Architecture (topology-focused)	Mermaid	Visible connections between components need automatic edge routing
Flowchart / pipeline	Mermaid	Automatic node positioning and edge routing; hand-drawn mode available
Sequence diagram	Mermaid	Lifelines, messages, and activation boxes need automatic layout
Data flow	Mermaid with edge labels	Connections and data descriptions need automatic edge routing
ER / schema diagram	Mermaid	Relationship lines between many entities need auto-routing
State machine	Mermaid	State transitions with labeled edges need automatic layout
Mind map	Mermaid	Hierarchical branching needs automatic positioning
Data table	HTML <table>	Semantic markup, accessibility, copy-paste behavior
Timeline	CSS (central line + cards)	Simple linear layout doesn't need a layout engine
Dashboard	CSS Grid + Chart.js	Card grid with embedded charts

Mermaid theming: Always use theme: 'base' with custom themeVariables so colors match your page palette. Use look: 'handDrawn' for sketch aesthetic or look: 'classic' for clean lines. Use layout: 'elk' for complex graphs (requires the @mermaid-js/layout-elk package — see references/libraries.md for the CDN import). Override Mermaid's SVG classes with CSS for pixel-perfect control. See references/libraries.md for full theming guide.

Mermaid syntax guardrails: Keep these parser and integration gotchas in mind before rendering:

• Flowcharts treat lowercase end as a subgraph terminator. If a node label must say it, quote it or change the case (End, END) before rendering.
• Expanded shape syntax such as A@{ shape: rect } requires Mermaid v11.3.0 or newer. Use older bracket shapes when the page pins an older Mermaid build.
• Markdown Strings support bold/italic formatting and automatic wrapping in labels when the label text is wrapped in backticks inside quotes, e.g. A["`**Title** details`"]. Use them for rich labels, but preview wrapping at mobile widths.
• Keep Mermaid's default securityLevel for untrusted diagram source. Set securityLevel: 'loose' only when the diagram text is trusted and click handlers or HTML labels are required.
• classDef is Mermaid styling applied inside the diagram source. Use it for stable node/edge classes, then use page CSS overrides on generated SVG classes only for final visual polish.

Mermaid zoom controls: Always add zoom controls (+/-/reset buttons) to every .mermaid-wrap container. Complex diagrams render at small sizes and need zoom to be readable. Include Ctrl/Cmd+scroll zoom on the container. See the zoom controls pattern in references/css-patterns.md and the reference template at assets/mermaid-flowchart.html.

AI-generated illustrations (optional). If surf-cli is available, you can generate images via Gemini and embed them in the page for creative, illustrative, explanatory, educational, or decorative purposes. Side effects: each surf gemini call shells the prompt out to an external Gemini-backed CLI that makes a paid Google Gemini API call over the network and consumes API quota. Check availability with which surf. If available:

# Generate to a unique temp file — one per image, never a fixed shared name
# (a page can have a hero banner plus inline illustrations)
TMP=$(mktemp /tmp/ve-img-XXXXXX.png)
surf gemini "descriptive prompt" --generate-image "$TMP" --aspect-ratio 16:9

# Base64-encode for self-containment (macOS; Linux: base64 -w 0 "$TMP")
IMG=$(base64 -i "$TMP")

# Remove the temp file whether or not the steps above succeeded
rm -f "$TMP"

Embed the encoded bytes inline, substituting them for ${IMG}:

<img src="data:image/png;base64,${IMG}" alt="descriptive alt text" />

See references/css-patterns.md for image container styles (hero banners, inline illustrations, captions).

When to use: Hero banners that establish the page's visual tone. Conceptual illustrations for abstract systems that Mermaid can't express (physical infrastructure, user journeys, mental models). Educational diagrams that benefit from artistic or photorealistic rendering. Decorative accents that reinforce the aesthetic.

When to skip: Anything Mermaid or CSS handles well. Generic decoration that doesn't convey meaning. Data-heavy pages where images would distract. Always degrade gracefully — if surf isn't available, skip images without erroring. The page should stand on its own with CSS and typography alone.

Prompt craft: Match the image to the page's palette and aesthetic direction. Specify the style (3D render, technical illustration, watercolor, isometric, flat vector, etc.) and mention dominant colors from your CSS variables. Use --aspect-ratio 16:9 for hero banners, --aspect-ratio 1:1 for inline illustrations. Keep prompts specific — "isometric illustration of a message queue with cyan nodes on dark navy background" beats "a diagram of a queue."

3. Style

Apply these principles to every diagram:

Typography is the diagram. Pick a distinctive font pairing from Google Fonts. A display/heading font with character, plus a mono font for technical labels. Never use Inter, Roboto, Arial, or system-ui as the primary font. Load via <link> in <head>. Include a system font fallback in the font-family stack for offline resilience.

Color tells a story. Use CSS custom properties for the full palette. Define at minimum: --bg, --surface, --border, --text, --text-dim, and 3-5 accent colors. Each accent should have a full and a dim variant (for backgrounds). Name variables semantically when possible (--pipeline-step not --blue-3). Support both themes. Put your primary aesthetic in :root and the alternate in the media query:

/* Light-first (editorial, paper/ink, blueprint): */
:root {
  /* light values */
}
@media (prefers-color-scheme: dark) {
  :root {
    /* dark values */
  }
}

/* Dark-first (neon, IDE-inspired, terminal): */
:root {
  /* dark values */
}
@media (prefers-color-scheme: light) {
  :root {
    /* light values */
  }
}

Surfaces whisper, they don't shout. Build depth through subtle lightness shifts (2-4% between levels), not dramatic color changes. Borders should be low-opacity rgba (rgba(255,255,255,0.08) in dark mode, rgba(0,0,0,0.08) in light) — visible when you look, invisible when you don't.

Backgrounds create atmosphere. Don't use flat solid colors for the page background. Subtle gradients, faint grid patterns via CSS, or gentle radial glows behind focal areas. The background should feel like a space, not a void.

Visual weight signals importance. Not every section deserves equal visual treatment. Executive summaries and key metrics should dominate the viewport on load (larger type, more padding, subtle accent-tinted background zone). Reference sections (file maps, dependency lists, decision logs) should be compact and stay out of the way. Use <details>/<summary> for sections that are useful but not primary — the collapsible pattern is in references/css-patterns.md.

Surface depth creates hierarchy. Vary card depth to signal what matters. Hero sections get elevated shadows and accent-tinted backgrounds (node--hero pattern). Body content stays flat (default .node). Code blocks and secondary content feel recessed (node--recessed). See the depth tiers in references/css-patterns.md. Don't make everything elevated — when everything pops, nothing does.

Animation earns its place. Staggered fade-ins on page load are almost always worth it — they guide the eye through the diagram's hierarchy. Mix animation types by role: fadeUp for cards, fadeScale for KPIs and badges, drawIn for SVG connectors, countUp for hero numbers. Hover transitions on interactive-feeling elements make the diagram feel alive. Always respect prefers-reduced-motion. CSS transitions and keyframes handle most cases. For orchestrated multi-element sequences, anime.js via CDN is available (see references/libraries.md).

4. Deliver

Output location: Write to ~/.kramme-cc-workflow/diagrams/. Create the directory if it doesn't exist. Use a descriptive filename based on content: modem-architecture.html, pipeline-flow.html, schema-overview.html. The directory persists across sessions. Re-running with the same descriptive filename overwrites the previous file by design — vary the name only when you want to keep an earlier diagram.

Open in browser — only when the user explicitly asked for a visual. For proactively-rendered tables, skip this and just report the path.

• macOS: open ~/.kramme-cc-workflow/diagrams/filename.html
• Linux: xdg-open ~/.kramme-cc-workflow/diagrams/filename.html
• Windows: start "" "%USERPROFILE%\.kramme-cc-workflow\diagrams\filename.html"

If the open command fails (headless, CI, or SSH with no GUI), don't retry — just report the path.

Tell the user the file path so they can re-open or share it.

Diagram Types

Architecture / System Diagrams

Two approaches depending on what matters more:

Text-heavy overviews (card content matters more than connections): CSS Grid with explicit row/column placement. Sections as rounded cards with colored borders and monospace labels. Vertical flow arrows between sections. Nested grids for subsystems. The reference template at assets/architecture.html demonstrates this pattern. Use when cards need descriptions, code references, tool lists, or other rich content that Mermaid nodes can't hold.

Topology-focused diagrams (connections matter more than card content): Use Mermaid. A graph TD or graph LR with custom themeVariables produces proper diagrams with automatic edge routing. Use look: 'handDrawn' for informal feel or look: 'classic' for clean lines. Use when the point is showing how components connect rather than describing what each component does in detail.

Flowcharts / Pipelines

Use Mermaid. Use graph TD for top-down or graph LR for left-right, with decision diamonds and parallel branches. Use look: 'handDrawn' for sketch aesthetic. Color-code node types with Mermaid's classDef or rely on themeVariables for automatic styling.

Sequence Diagrams

Use Mermaid. Lifelines, messages, activation boxes, notes, and loops all need automatic layout. Use Mermaid's sequenceDiagram syntax. Style actors and messages via CSS overrides on .actor, .messageText, .activation classes.

Data Flow Diagrams

Use Mermaid. Use graph LR or graph TD with edge labels for data descriptions. Thicker, colored edges for primary flows. Source/sink nodes styled differently from transform nodes via Mermaid's classDef.

Schema / ER Diagrams

Use Mermaid. Relationship lines between entities need automatic routing. Use Mermaid's erDiagram syntax with entity attributes. Style via themeVariables and CSS overrides on .er.entityBox and .er.relationshipLine.

State Machines / Decision Trees

Use Mermaid. Use stateDiagram-v2 for states with labeled transitions. Supports nested states, forks, joins, and notes. Use look: 'handDrawn' for informal state diagrams. Decision trees can use graph TD with diamond decision nodes.

stateDiagram-v2 label caveat: Transition labels have a strict parser — colons, parentheses, <br/>, HTML entities, and most special characters cause silent parse failures. If your labels need any of these, use flowchart LR instead with rounded nodes and quoted edge labels. Reserve stateDiagram-v2 for simple single-word or plain-text labels.

Mind Maps / Hierarchical Breakdowns

Use Mermaid. Use mindmap syntax for hierarchical branching from a root node. Mermaid handles the radial layout automatically. Style with themeVariables to control node colors at each depth level.

Data Tables / Comparisons / Audits

Use a real <table> element — not CSS Grid pretending to be a table. Tables get accessibility, copy-paste behavior, and column alignment for free. The reference template at assets/data-table.html demonstrates all patterns.

Use proactively for any sizable structured table — see the proactive threshold and behavior at the top of this skill. Common cases: requirement audits, feature comparisons, status reports, configuration matrices, test result summaries, dependency lists, permission tables, API endpoint inventories.

Timeline / Roadmap Views

Vertical or horizontal timeline with a central line (CSS pseudo-element). Phase markers as circles on the line. Content cards branching left/right (alternating) or all to one side. Date labels on the line. Color progression from past (muted) to future (vivid).

Dashboard / Metrics Overview

Card grid layout. Hero numbers large and prominent. Sparklines via inline SVG <polyline>. Progress bars via CSS linear-gradient on a div. For real charts (bar, line, pie), use Chart.js via CDN (see references/libraries.md). KPI cards with trend indicators (up/down arrows, percentage deltas).

File Structure

Every diagram is a single self-contained .html file. No external assets except CDN links (fonts, optional libraries). Structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Descriptive Title</title>
    <link
      href="https://fonts.googleapis.com/css2?family=...&display=swap"
      rel="stylesheet"
    />
    <style>
      /* CSS custom properties, theme, layout, components — all inline */
    </style>
  </head>
  <body>
    <!-- Semantic HTML: sections, headings, lists, tables, inline SVG -->
    <!-- No script needed for static CSS-only diagrams -->
    <!-- Optional: <script> for Mermaid, Chart.js, or anime.js when used -->
  </body>
</html>

Quality Checks

Before delivering, verify:

• The squint test: Blur your eyes. Can you still perceive hierarchy? Are sections visually distinct?
• The swap test (defined in step 1, Think): if a generic dark theme would render this indistinguishable from a template, push the aesthetic further.
• Both themes: Toggle your OS between light and dark mode. Both should look intentional, not broken.
• Information completeness: Does the diagram actually convey what the user asked for? Pretty but incomplete is a failure.
• No overflow: Resize the browser to different widths. No content should clip or escape its container. Every grid and flex child needs min-width: 0. Side-by-side panels need overflow-wrap: break-word. Never use display: flex on <li> for marker characters — it creates anonymous flex items that can't shrink. Use absolute positioning for markers instead. See the Overflow Protection section in references/css-patterns.md.
• Mermaid zoom controls: Every .mermaid-wrap container must have zoom controls (+/-/reset buttons), Ctrl/Cmd+scroll zoom, and click-and-drag panning. Complex diagrams render too small without them.
• File opens cleanly: No console errors, no broken font loads, no layout shifts.