Menu
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/HezaoHezao/poirot --skill architecture-diagramThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | architecture-diagram |
| description | Dark-themed SVG architecture/cloud/infra diagrams as HTML. |
| allowed-tools | ["write_file","read_file"] |
| enabled | true |
| related-skills | ["concept-diagrams"] |
| license | MIT |
| author | Adapted from hermes-agent (Nous Research, MIT); Cocoon AI |
Generate professional, dark-themed technical architecture diagrams as standalone HTML files with inline SVG graphics. No external tools, no API keys, no rendering libraries — just write the HTML file and open it in a browser.
Best suited for:
Look elsewhere first for:
concept-diagramsconcept-diagramswrite_file to a .html filewrite_file("architecture.html", "<full HTML with inline SVG + CSS>")
# Default to current working directory
./[project-name]-architecture.html
:root {
--bg: #0a0a1a;
--grid: #1a1a2e;
/* Component types */
--c-frontend: #00D9FF; /* cyan */
--c-backend: #50C878; /* green */
--c-database: #F5A623; /* orange */
--c-external: #C4A7E7; /* purple */
--c-queue: #FF6B6B; /* red */
--c-cache: #FFD700; /* gold */
--text: #E0E0E0;
--text-dim: #888;
--border: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Architecture Diagram</title>
<style>
body {
margin: 0; padding: 40px;
background: var(--bg);
background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
background-size: 30px 30px;
}
svg { display: block; margin: 0 auto; }
.component {
stroke-width: 2; rx: 6; ry: 6;
fill-opacity: 0.1;
}
.label {
font-family: 'SF Mono', 'Fira Code', monospace;
font-size: 13px; fill: var(--text);
}
.label-type {
font-size: 10px; fill: var(--text-dim);
: uppercase; : ;
}
{
: (--text-dim); : ;
: none; : ;
: ();
}
Web App
Frontend
API Server
Backend
PostgreSQL
Database
Based on SOC occupation classification