Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From ris-claude-code
Generates standalone HTML diagrams in flat engineering blueprint style using Tailwind v4 and D3 v7. For architecture diagrams, system flows, technical spec sheets, and component maps.
npx claudepluginhub serejaris/ris-claude-codeHow this skill is triggered — by the user, by Claude, or both
Slash command
/ris-claude-code:ris-draftThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate one HTML page that renders a technical diagram in a strict flat-blueprint aesthetic — the look of a printed engineering specification sheet, not a marketing landing.
Creates technical and product diagrams (architecture, flowchart, sequence, etc.) as standalone HTML files with inline SVG. Includes style guide setup and 14 diagram types.
Create SVG-based technical diagrams inside HTML — flowcharts, sequence diagrams, state machines, data-flow diagrams, dependency graphs, request/response timelines. Use whenever the user wants to visualize, illustrate, diagram, or sketch a technical concept, system, or process. Strongly prefer SVG over ASCII art, mermaid blocks, or markdown text for anything spatial or relational. Reach for this whenever an explanation involves arrows, boxes, layers, or sequencing — even when the user doesn't say "diagram".
Generate architecture diagrams, flowcharts, decision trees, workflows, sequence flows, ERDs from declarative D2 text with automatic layouts, themes, and styling.
Share bugs, ideas, or general feedback.
Generate one HTML page that renders a technical diagram in a strict flat-blueprint aesthetic — the look of a printed engineering specification sheet, not a marketing landing.
Stack: Tailwind v4 via @tailwindcss/browser CDN for layout + utilities, D3 v7 via jsDelivr CDN for SVG-based diagrams (nodes, connectors, layouts, animations).
Use this when the user wants an architecture diagram, system flow, technical spec sheet, or component map as a standalone HTML artifact (suitable for slides, reports, exports).
Don't use this for:
Precise. Objective. High data-ink ratio (Tufte). Every pixel earns its place; nothing decorative. The stack is modern (Tailwind + D3) but the output looks like a printed engineering doc.
@theme)@theme {
--color-c-bg: #f8fafc; /* page background — slate-50 */
--color-c-canvas: #ffffff; /* diagram canvas */
--color-c-border: #cbd5e1; /* slate-300 */
--color-c-text-main: #0f172a; /* slate-900 */
--color-c-text-sub: #64748b; /* slate-500 */
--color-c-accent: #b91c1c; /* red-700 — semantic only */
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
Tokens become Tailwind utilities automatically: bg-c-canvas, border-c-border, text-c-text-sub, font-mono.
font-ui)font-mono.diagram-canvas — bordered box with generous padding (p-8 or more)grid / flex utilities; no eyeballingborder-t / border-l for orthogonal CSS connectors<svg>https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4https://cdn.jsdelivr.net/npm/d3@7<!DOCTYPE html> through </html><style type="text/tailwindcss"> @theme block — no scattered custom CSS<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>[Diagram Title]</title>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
--color-c-bg: #f8fafc;
--color-c-canvas: #ffffff;
--color-c-border: #cbd5e1;
--color-c-border-strong: #94a3b8;
--color-c-text-main: #0f172a;
--color-c-text-sub: #64748b;
--color-c-accent: #b91c1c;
--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-mono: 'SF Mono', Monaco, Consolas, monospace;
}
body {
font-family: var(--font-ui);
}
.mono {
font-family: var(--font-mono);
}
</style>
</head>
<body class="bg-c-bg text-c-text-main p-10">
<div class="max-w-[1200px] mx-auto bg-c-canvas border-2 border-c-border-strong p-8">
<header class="border-b border-c-border pb-4 mb-6 flex items-end justify-between">
<div>
<h1 class="text-2xl font-semibold">[Title]</h1>
<p class="mono text-[11px] uppercase tracking-widest text-c-text-sub mt-1">
[SUBTITLE]
</p>
</div>
<div class="mono text-[11px] text-c-text-sub text-right">
DOC-[ID]<br/>REV A
</div>
</header>
<!-- Diagram content: Tailwind grid for spec sheets, D3 SVG for flows -->
<section class="grid grid-cols-2 border border-c-border">
<!-- spec cells, see snippets below -->
</section>
<!-- D3 mount point for SVG diagrams -->
<svg id="d3-diagram" class="w-full border border-c-border mt-6" height="400"></svg>
</div>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script>
// D3 diagram rendering — see "D3 patterns" section below
</script>
</body>
</html>
<div class="bg-c-canvas border border-c-border p-3">
<div class="text-[10px] uppercase tracking-wide text-c-text-sub">label</div>
<div class="mono text-sm">value</div>
</div>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 border border-c-text-main">
ACTIVE
</span>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 bg-c-text-main text-c-canvas">
SCHEDULED
</span>
<span class="inline-block mono text-[10px] uppercase px-1.5 py-0.5 bg-c-accent text-c-canvas">
OVERDUE
</span>
<div class="border-t border-c-border"></div>
<div class="border-t border-dashed border-c-border"></div>
<div class="p-4 border-r border-b border-c-border last:border-r-0">
<div class="text-[10px] uppercase tracking-wide text-c-text-sub mb-1">label</div>
<div class="mono text-sm">value</div>
</div>
Use D3 when geometry is non-orthogonal, computed, or large enough that hand-placing nodes is unmaintainable.
const svg = d3.select('#d3-diagram');
const nodes = [
{ id: 'api', x: 100, y: 100, label: 'API' },
{ id: 'worker', x: 400, y: 100, label: 'Worker' },
{ id: 'db', x: 250, y: 280, label: 'DB' },
];
const links = [
{ source: 'api', target: 'worker', style: 'solid' },
{ source: 'api', target: 'db', style: 'solid' },
{ source: 'worker', target: 'db', style: 'dashed' },
];
const byId = Object.fromEntries(nodes.map(n => [n.id, n]));
// arrow marker
svg.append('defs').append('marker')
.attr('id', 'arrow').attr('viewBox', '0 -5 10 10')
.attr('refX', 8).attr('refY', 0).attr('markerWidth', 6).attr('markerHeight', 6)
.attr('orient', 'auto')
.append('path').attr('d', 'M0,-4L8,0L0,4').attr('fill', '#0f172a');
// links
svg.selectAll('line').data(links).enter().append('line')
.attr('x1', d => byId[d.source].x).attr('y1', d => byId[d.source].y)
.attr('x2', d => byId[d.target].x).attr('y2', d => byId[d.target].y)
.attr('stroke', '#0f172a').attr('stroke-width', 1)
.attr('stroke-dasharray', d => d.style === 'dashed' ? '4 3' : null)
.attr('marker-end', 'url(#arrow)');
// nodes
const g = svg.selectAll('g.node').data(nodes).enter().append('g')
.attr('transform', d => `translate(${d.x - 50}, ${d.y - 18})`);
g.append('rect').attr('width', 100).attr('height', 36)
.attr('fill', '#fff').attr('stroke', '#0f172a').attr('stroke-width', 1);
g.append('text').attr('x', 50).attr('y', 22)
.attr('text-anchor', 'middle').attr('font-size', 12)
.attr('font-family', 'system-ui').text(d => d.label);
d3.hierarchy() + d3.tree() for parent/child trees (component maps, org charts). Render with the same flat node style; never use the default rounded D3 examples.
d3-dag (optional) or manual topological layout. For < 15 nodes, hand-place coordinates — it's faster and tighter than a layout algorithm.
d3-sankey plugin (https://cdn.jsdelivr.net/npm/d3-sankey@0.12) when volumes matter. Keep ribbons grayscale; one accent only for the watched flow.
@tailwindcss/browser@4, d3@7)mermaid-diagrams skill if the user wants MermaidMethodology adapted from QoderWork's drafter-diagram skill (flat-engineering-blueprint visual system), restacked on Tailwind v4 + D3 v7.