Stats
Actions
Tags
From personal-corp-skills
Generates standalone HTML diagrams in flat engineering blueprint style using Tailwind v4 and D3 v7. Useful for architecture diagrams, system flows, technical spec sheets, and component maps.
How this skill is triggered — by the user, by Claude, or both
Slash command
/personal-corp-skills:html-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.
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/[email protected]) 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.
npx claudepluginhub serejaris/personal-corp-skills --plugin personal-corp-skillsCreates 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".
Generates a self-contained HTML file with a high-quality SVG system architecture diagram, optionally interactive with animated request paths. Use when visualizing architecture or stack relationships, not prose.