Agent skill

Concept Diagrams

Minimal SVG diagrams as standalone HTML files. An agent skill from HezaoHezao/poirot.

Install Concept Diagrams

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .claude/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .claude/skills/concept-diagrams && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .claude/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .agents/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .agents/skills/concept-diagrams && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .agents/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .cursor/skills/concept-diagrams && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .cursor/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/HezaoHezao/poirot.git --path poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .gemini/skills/concept-diagrams && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .gemini/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .github/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .github/skills/concept-diagrams && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .github/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add HezaoHezao/poirot --skill concept-diagrams -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install HezaoHezao/poirot concept-diagrams --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/HezaoHezao/poirot.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams .opencode/skills/concept-diagrams && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "concept-diagrams" agent skill from https://github.com/HezaoHezao/poirot/tree/master/poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams into .opencode/skills/concept-diagrams/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "concept-diagrams", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: concept-diagrams
GitHub stars: 249
Token cost: ~1k tokens
SKILL.md length: 274 words
Files: 1
Skills in repo: 23
Repo updated: Jul 28, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Minimal SVG diagrams as standalone HTML files. An agent skill from HezaoHezao/poirot.

Works in 5 steps: Decide on the diagram type (see below) → Lay out components using the Design… → Write the full HTML page with inline SVG… → …
Tasks that involve Diagrams
SKILL.md covers Overview, Scope, Workflow and Diagram Types, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Concept Diagrams is an agent skill from HezaoHezao/poirot. Minimal SVG diagrams as standalone HTML files.

Its SKILL.md is about 1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Diagrams and HTML artifacts. The repository describes itself as: Poirot is a deep research agent kernel built for those who care about how agents are architected. The licence is MIT.

When your agent uses it

Tasks that involve Diagrams
Tasks that involve HTML artifacts

Example prompts

“/concept-diagrams”

Requirements

Pre-approved tools (allowed-tools): write_file, read_file

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit 86bf279. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves these tools, so the agent can use them without asking each time:
- write_file
- read_file
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md (its code samples are css and html).
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Concept Diagrams loads about 1k tokens when it runs. Until then it costs about 16 tokens; SKILL.md has 274 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~16
When it runs · the whole SKILL.md, loaded when a task matches: ~1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from HezaoHezao/poirot at commit 86bf279, republished under its MIT licence (© HezaoHezao). 274 words, ~1,043 tokens.

Download SKILL.mdSave it as .claude/skills/concept-diagrams/SKILL.md (or your agent's skills folder).

name: concept-diagrams
description: Minimal SVG diagrams as standalone HTML files.
allowed-tools: write_file, read_file
enabled: true
related-skills: architecture-diagram
license: MIT
author: Adapted from hermes-agent (Nous Research, MIT); v1k22

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

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

write_file("diagram.html", "<full HTML with inline SVG + CSS>")

Diagram Types

Type	When
Process flow	Sequential steps, lifecycle, pipeline
Hub-spoke	Central system + connected components (IoT, smart city)
Exploded layers	Component breakdown, cross-section
Comparison	Side-by-side, before/after
Cycle	Circular process, feedback loop
Hierarchy	Org chart, taxonomy, tree
Timeline	Chronological 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)

css

: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

html

<!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.

Files

Just SKILL.md in poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams of HezaoHezao/poirot.

Open the folder on GitHubat commit 86bf279

Compare with similar skills

Concept Diagrams next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Concept Diagrams compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Concept Diagrams this skillHezaoHezao/poirot	249	—	~1k	Automated safety check: Pass	MIT	2 mo ago
Previewhanamizuki/solopreneur	152	—	~5.2k	Automated safety check: Pass	MIT	15 days ago
Show Metellahq/opensession	394	—	~1.6k	Automated safety check: Pass	MIT	today
Show Memirumee/nimara-ecommerce	129	7 repos	~809	Automated safety check: Pass	BSD-3-Clause	2 days ago
Design Itsmallnest/goal-workflow	291	—	~1.1k	Automated safety check: Pass	MIT	28 days ago
Generative UIhimself65/finance-skills	3.4k	—	~3.1k	Automated safety check: Pass	MIT	6 days ago

Similar skills

Preview
hanamizuki/solopreneur
Create an interactive HTML preview of any proposal, plan, idea, doc, brief, or spec and land it in the browsable local Preview Library by default (opens under file:// with a catalog sidebar and…
152 GitHub stars~5.2k tokensUpdated 15 days ago
Frontend & DesignAuto-check passed
Show Me
tellahq/opensession
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
394 GitHub stars~1.6k tokensUpdated today
Frontend & DesignAuto-check passed
Show Me
mirumee/nimara-ecommerce
Help the user understand the current topic visually with concise diagrams, code-shape sketches, and focused HTML artifacts.
129 GitHub starsUsed in 7 repos~809 tokens
Frontend & DesignAuto-check passed
Design It
smallnest/goal-workflow
A skill your agent uses when turning a requirement, spec, or feature brief into a single self-contained HTML design document in a fixed house style — one styled HTML page with a table-of-contents…
291 GitHub stars~1.1k tokensUpdated 28 days ago
Frontend & DesignAuto-check passed
Generative UI
himself65/finance-skills
Design system and templates for Claude's built-in generative UI — the showwidget tool that renders interactive HTML/SVG widgets inline in claude.ai conversations.
3.4k GitHub stars~3.1k tokensUpdated 6 days ago
Frontend & DesignAuto-check passed
Concept Diagrams
Tommy-yw/RunbookHermes
Generate flat, minimal light/dark-aware SVG diagrams as standalone HTML files, using a unified educational visual language with 9 semantic color ramps, sentence-case typography, and automatic dark…
546 GitHub starsUsed in 3 repos~4.3k tokens
Frontend & DesignAuto-check passed

Questions about Concept Diagrams

What does Concept Diagrams do?

Minimal SVG diagrams as standalone HTML files. An agent skill from HezaoHezao/poirot. Concept Diagrams is an agent skill from HezaoHezao/poirot. Minimal SVG diagrams as standalone HTML files.

When should I use Concept Diagrams?

Concept Diagrams fits situations like: tasks that involve Diagrams; tasks that involve HTML artifacts.

How do I install Concept Diagrams in Claude Code?

Run `npx skills add HezaoHezao/poirot --skill concept-diagrams -a claude-code`. Or copy the skill folder (poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams in HezaoHezao/poirot) into .claude/skills/concept-diagrams in your project. Claude Code loads it when a task matches its description.

How do I install Concept Diagrams in Codex?

Run `npx skills add HezaoHezao/poirot --skill concept-diagrams -a codex`. Or copy the skill folder (poirot/backend/agents/skill/builtin_skills/creative/concept-diagrams in HezaoHezao/poirot) into .agents/skills/concept-diagrams in your project. Codex loads it when a task matches its description.

Can I use Concept Diagrams in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add HezaoHezao/poirot --skill concept-diagrams -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/concept-diagrams, .gemini/skills/concept-diagrams, .github/skills/concept-diagrams and .opencode/skills/concept-diagrams in your project.

What does Concept Diagrams need to run?

SKILL.md names no scripts, command-line tools or credentials: Concept Diagrams is instructions for the agent only. Its frontmatter pre-approves these tools: write_file, read_file.

Does Concept Diagrams access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Concept Diagrams safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Concept Diagrams use?

Concept Diagrams is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Concept Diagrams use?

About 1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Concept Diagrams?

Skills that share tags, products or a category with Concept Diagrams: Preview (hanamizuki/solopreneur, 152 stars), Show Me (tellahq/opensession, 394 stars), Show Me (mirumee/nimara-ecommerce, 129 stars) and Design It (smallnest/goal-workflow, 291 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Concept Diagrams?

HezaoHezao (a GitHub user) maintains it in HezaoHezao/poirot, which has 249 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on July 28, 2026.

Source: HezaoHezao/poirot on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Concept Diagrams

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Concept Diagrams

Overview

Scope

Workflow

Diagram Types

Design System

Philosophy

Color Ramps (light/dark aware)

SVG Structure

Pitfalls

Files

Compare with similar skills

Similar skills

More from HezaoHezao/poirot

Related

Questions about Concept Diagrams