Skip to content
cccskills
FreePublished on GitHub

concept-diagrams

Minimal SVG diagrams as standalone HTML files.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot

Run score Not tested

See how to install

Files included (1)

  • SKILL.md4.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Concept Diagrams

Overview

Generate production-quality SVG diagrams with a unified flat, minimal design system. Output is a single self-contained HTML file that renders identically in any modern browser, with automatic light/dark mode.

Scope

Best suited for:

  • Physics setups, chemistry mechanisms, math curves, biology
  • Physical objects (aircraft, turbines, smartphones, mechanical watches)
  • Anatomy, cross-sections, exploded layer views
  • Floor plans, architectural conversions
  • Narrative journeys (lifecycle of X, process of Y)
  • Hub-spoke system integrations (smart city, IoT)
  • Educational / textbook-style visuals in any domain

Look elsewhere first for:

  • Software/cloud architecture with dark tech aesthetic → use architecture-diagram
  • Hand-drawn whiteboard sketches → use an excalidraw-style tool

Workflow

  1. Decide on the diagram type (see below)
  2. Lay out components using the Design System rules
  3. Write the full HTML page with inline SVG + CSS
  4. Save as a standalone .html file via write_file
  5. User opens it directly in a browser — no server, no dependencies
write_file("diagram.html", "<full HTML with inline SVG + CSS>")

Diagram Types

TypeWhen
Process flowSequential steps, lifecycle, pipeline
Hub-spokeCentral system + connected components (IoT, smart city)
Exploded layersComponent breakdown, cross-section
ComparisonSide-by-side, before/after
CycleCircular process, feedback loop
HierarchyOrg chart, taxonomy, tree
TimelineChronological events

Design System

Philosophy

  • Flat, minimal, no 3D effects
  • Semantic colors: 9 color ramps for different element types
  • Sentence-case typography: not Title Case
  • Automatic dark mode: CSS prefers-color-scheme

Color Ramps (light/dark aware)

:root {
  /* Primary elements */
  --c-primary: #4A90D9;
  --c-secondary: #50C878;
  --c-accent: #F5A623;

  /* Semantic */
  --c-input: #7B68EE;
  --c-output: #FF6B6B;
  --c-process: #4ECDC4;
  --c-data: #95E1D3;
  --c-control: #C4A7E7;
  --c-external: #DDD;

  /* Light mode (default) */
  --bg: #FAFAFA;
  --text: #333;
  --border: #E0E0E0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1A1A2E;
    --text: #EEE;
    --border: #333;
    --c-external: #444;
  }
}

SVG Structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Diagram Title</title>
<style>
  body { margin: 0; padding: 40px; background: var(--bg); }
  svg { display: block; margin: 0 auto; }
  .label { font-family: -apple-system, sans-serif; font-size: 14px; fill: var(--text); }
  .title { font-size: 18px; font-weight: 600; }
  .box { fill: var(--c-primary); opacity: 0.15; stroke: var(--c-primary); stroke-width: 2; rx: 8; }
  .arrow { stroke: var(--text); stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
</style>
</head>
<body>
<svg width="800" height="600" viewBox="0 0 800 600">
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="var(--text)"/>
    </marker>
  </defs>
  <!-- Diagram elements here -->
  <rect class="box" x="50" y="50" width="200" height="80"/>
  <text class="label title" x="150" y="90" text-anchor="middle">Input</text>
  <path class="arrow" d="M 250 90 L 350 90"/>
  <!-- ... more elements ... -->
</svg>
</body>
</html>

Pitfalls

  • Too much detail: keep diagrams minimal. One concept per diagram.
  • Inconsistent spacing: use a grid (e.g., 50px increments) for alignment.
  • No dark mode: always include prefers-color-scheme media query.
  • Font not embedded: use system fonts (-apple-system, sans-serif) so the HTML works without external font files.
  • SVG overflow: set viewBox correctly so the diagram isn't clipped.

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

academic-paper-review

Free

Structured peer-review of academic papers.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

architecture-diagram

Free

Dark-themed SVG architecture/cloud/infra diagrams as HTML.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

arxiv

Free

Search arXiv papers by keyword, author, category, or ID.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

blogwatcher

Free

Monitor blogs and RSS/Atom feeds via blogwatcher-cli.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

bootstrap

Free

Onboarding conversation to generate a user profile.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

chart-visualization

Free

Generate charts: select type, extract data, render image.

The English summary is being prepared. Showing the original description.

HezaoHezao/poirot252Updated Jul 29, 2026

See all skills by HezaoHezao

Report a problem with this skill