Menú
De forma predeterminada está seleccionado el prompt que primero revisa el origen. Puedes cambiar a un comando directo o descargar una copia local.
Lee SKILL.md y los archivos complementarios que muestra SkillsMP antes de decidir si quieres instalarlo.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Un comando directo omite el prompt de revisión. Revisa el origen antes de ejecutarlo.
npx skills add https://github.com/HezaoHezao/poirot --skill architecture-diagramEl comando permanece en una sola línea. Desplázate horizontalmente para revisarlo antes de copiarlo.
¿Prefieres una copia local? Descarga los archivos que SkillsMP tiene disponibles ahora.
Basado en la clasificación ocupacional SOC
Mostrando 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