HezaoHezao
HezaoHezao/poirot
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/HezaoHezao/poirot --skill architecture-diagram命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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