Render clean blueprint-style SVG diagrams from JSON specs. Use when users ask to draw, sketch, or diagram a request flow, neural net, transformer block, system architecture, state machine, data pipeline, or any node-and-edge technical visual they want as an SVG for docs, READMEs, posts, or slides.
インストールする前に、エージェントに与えられる指示の中身を確認できます。
Use diagrammer to turn a small JSON spec into a clean SVG diagram. It is useful when the user wants a precise technical diagram without opening a design tool.
The renderer must be installed locally:
pipx install diagrammer
diagrammer path/to/spec.json > path/to/diagram.svg
{
"nodes": [
{"id": "client", "type": "box", "label": "client"},
{"id": "api", "type": "box", "label": "api"},
{"id": "db", "type": "database", "label": "postgres"}
],
"edges": [
{"from": "client", "to": "api", "label": "request"},
{"from": "api", "to": "db", "label": "query"}
]
}
Built-in node types: box, circle, text, database, stack, group, note, and custom.
Useful optional fields:
direction: "LR" or "TB"router: "straight" or "ortho"label on edgesstyle: "solid" or "dashed"weight: "thin" or "thick"For the full reference, run:
diagrammer prompt
Use diagrammer when the output should be a checked-in SVG artifact, especially for:
Prefer Mermaid when the user specifically asks for Mermaid syntax or wants diagrams rendered by a Markdown platform. Prefer Excalidraw when the user wants editable hand-drawn canvas files.
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.
日本語の概要は準備中です。原文の説明を表示しています。
When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," or "hypothesis." For tracking implementation, see analytics-tracking.
日本語の概要は準備中です。原文の説明を表示しています。
Format CVs for academic positions, including publications, grants, teaching, and research experience. Use when the user mentions academic CV, faculty job, tenure-track, postdoc, PhD, research position, or needs to list publications, grants, conferences, or teaching.
日本語の概要は準備中です。原文の説明を表示しています。
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
日本語の概要は準備中です。原文の説明を表示しています。
Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites for accessibility issues, implementing WCAG 2.1 AA/AAA standards, testing with screen readers, or ensuring ADA compliance. Expert in semantic HTML, keyboard navigation, and assistive technology compatibility.
日本語の概要は準備中です。原文の説明を表示しています。
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
日本語の概要は準備中です。原文の説明を表示しています。