Archify Diagrams
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
Create and review C4 software-architecture diagrams using Mermaid or Structurizr.
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install magnus919/agent-skills c4-diagramming --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/c4-diagramming .claude/skills/c4-diagramming && rm -rf skills-srcUse ~/.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/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .claude/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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 install https://github.com/magnus919/agent-skills/tree/main/c4-diagrammingType 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.
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install magnus919/agent-skills c4-diagramming --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/c4-diagramming .agents/skills/c4-diagramming && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .agents/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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.
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install magnus919/agent-skills c4-diagramming --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/c4-diagramming .cursor/skills/c4-diagramming && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .cursor/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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 https://github.com/magnus919/agent-skills.git --path c4-diagramming--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install magnus919/agent-skills c4-diagramming --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/c4-diagramming .gemini/skills/c4-diagramming && rm -rf skills-srcUse ~/.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/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .gemini/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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.
$ gh skill install magnus919/agent-skills c4-diagrammingInstalls 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).
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/c4-diagramming .github/skills/c4-diagramming && rm -rf skills-srcUse ~/.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/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .github/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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.
$ npx skills add magnus919/agent-skills --skill c4-diagramming -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install magnus919/agent-skills c4-diagramming --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/magnus919/agent-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/c4-diagramming .opencode/skills/c4-diagramming && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "c4-diagramming" agent skill from https://github.com/magnus919/agent-skills/tree/main/c4-diagramming into .opencode/skills/c4-diagramming/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "c4-diagramming", 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.
c4-diagrammingCreate and review C4 software-architecture diagrams using Mermaid or Structurizr.
C4 Diagramming is an agent skill from magnus919/agent-skills. Create and review C4 software-architecture diagrams using Mermaid or Structurizr. Use when teams need a communication-ready system context, container, component, or code-level view, including audience, narrative, hierarchy, labels, legends, accessibility, and uncertainty. Do not use for Mermaid syntax/rendering work without C4 modeling, architecture decisions, or full accessibility conformance reviews.
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `README.md`, `evals/evals.json` and `references/architecture-as-code-ecosystem.md`). Compatibility notes: Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.
It sits in Development, covering Diagrams, Software architecture and Accessibility. It works with Mermaid. The repository describes itself as: Curated collection of AI agent skills for Hermes and other agent frameworks. The licence is MIT.
Read from SKILL.md and the folder at commit 22b4723. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
github.comc4model.comFrom URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams.
From compatibility in the SKILL.md frontmatter.
C4 Diagramming loads about 2k tokens when it runs, and up to ~8.9k if it reads all its reference files. Until then it costs about 105 tokens; SKILL.md has 789 words of instructions outside code blocks.
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.
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.
The full file from magnus919/agent-skills at commit 22b4723, republished under its MIT licence (© magnus919). 789 words, ~1,971 tokens.
.claude/skills/c4-diagramming/SKILL.md (or your agent's skills folder). This skill also uses 7 other files; get the full folder from GitHub.C4 Model for structural architecture visualization. Produces diagrams at four zoom levels, mapped into the artifact pyramid.
| C4 Level | Pyramid Layer | Path |
|---|---|---|
| Level 1: System Context | L1 (Summary) | 01-summary/system-context.md |
| Level 2: Container | L2 (Analysis) | 02-analysis/structural-views/container.md |
| Level 3: Component | L2 (Analysis) | 02-analysis/structural-views/components.md |
| Level 4: Code | L3 (Dossiers) | 03-dossiers/code-level-detail.md |
C4 is the cleanest structural fit — its four-level hierarchy maps to the three pyramid layers with almost no translation, and Levels 2-3 both resolve to separate L2 analysis files.
Before choosing notation or polishing layout, state the audience and the job the reader must complete. Select one C4 level that answers that job; do not mix system context, container, component, and code claims merely to fill a canvas. Keep the abstraction level, element vocabulary, boundary treatment, and relationship meaning consistent within a view. A structurally valid C4 model can still be the wrong communication artifact if it asks the reader to infer the purpose, mixes levels, hides important paths, or overwhelms the intended reader.
Load references/technical-diagram-communication.md when creating, revising, or reviewing a diagram for a real audience. Use its review record to check narrative/read order, visual hierarchy, labels and legends, signal-to-noise, color-independent meaning, accessibility handoff, uncertainty, and review evidence. Full accessibility conformance remains owned by web-accessibility; architecture decisions remain owned by software-architecture.
Record the intended audience and question, C4 level and scope, key claim, known uncertainty, target renderer, and an accessible text or tabular fallback. Review both the source model and the rendered artifact. A passing syntax/model validator proves structural validity only; it does not prove that the diagram communicates the intended claim.
Use when you need a single diagram embedded in markdown. See the GitHub Rendering Constraint section below for C4-in-Mermaid compatibility notes.
Structurizr DSL is the C4 model's reference "models as code" implementation, created by Simon Brown. Define the entire architecture model in a single DSL file; all 4 C4 levels are generated from it. This ensures structural consistency across diagrams that hand-written Mermaid cannot guarantee.
workspace {
model {
user = person "Customer"
system = softwareSystem "Your System" {
webapp = container "Web Application" "TypeScript, React"
api = container "API" "Go"
db = container "Database" "PostgreSQL"
user -> webapp "Uses"
webapp -> api "Makes API calls"
api -> db "Reads/writes"
}
}
views {
systemContext system { include * autolayout lr }
container system { include * autolayout lr }
component api { include * autolayout lr }
theme default
}
}Key capabilities:
!adrs docs/adr — imports Architecture Decision Records (adr-tools, MADR, log4brains) into the workspace, rendered alongside C4 diagrams!docs docs/arc42 — imports arc42 documentation as Markdown/AsciiDocvalidate, inspect, export (PlantUML, Mermaid, static site)Full reference in references/architecture-as-code-ecosystem.md — tool comparison, DSL cookbook, C4-PlantUML alternative, and the converged repo convention.
references/c4-to-pyramid-mapping.md — context→L1, container/component→L2, code→L3 (Mermaid + Structurizr DSL paths)c4-to-flowchart.md — companion Mermaid conversion patterns for GitHub-compatible flowchartsreferences/architecture-as-code-ecosystem.md — Structurizr DSL, C4-PlantUML, docToolChain, converged repo convention, tool comparison tablereferences/ci-pipeline-templates.md — GitHub Actions, GitLab CI, ForgeJo (Gitea Actions, Woodpecker) pipeline templates for Structurizr validation, export, deployGitHub's built-in Mermaid renderer does not bundle the C4 plugin (@mermaid-js/mermaid). Any ````mermaidblock usingC4Context, C4Container, or C4Component` syntax renders as raw code rather than a diagram on GitHub. This affects issues, PR descriptions, discussion comments, and markdown files.
Workaround: Convert C4 diagrams to standard flowchart syntax before embedding in GitHub markdown:
Person() → [rect] node with labelSystem() / System_Ext() → [rect] inside or outside subgraphsContainer() → [rect with tech stack label]`Db() → [(cylinder shape)]System_Boundary{} / Container_Boundary{} → subgraph ... endRel() → -- label --> or -.->UpdateLayoutConfig() — use flowchart LR or TB directive insteadFor the full conversion table with worked examples, load c4-to-flowchart.md from the companion mermaid-diagrams skill when it is available.
.mmd files in a DIAGRAMS/ directory must also use standard flowchart syntax if they need to render via mmdc or on GitHub. Files using C4-plugin syntax can only render in tools that bundle the plugin (e.g., Mermaid Live Editor, mmdc with C4 extension config). If you commit .mmd files with C4 syntax to a repo, GitHub's file preview will show them as raw text — convert them to standard syntax or render them to PNG first.
A GitHub Community feature request to bundle the C4 mermaid plugin was filed at https://github.com/orgs/community/discussions/197898 (closed — requires submission through the web UI with the Apps, API and Webhooks discussion template). If this gets implemented, the flowchart conversions below would no longer be necessary for GitHub rendering.
This skill is intentionally host-neutral. Use your agent's normal mechanisms to load the references, templates, and scripts listed here. Do not assume a particular profile system, task orchestrator, memory service, or response-handoff format.
mermaid-diagrams for Mermaid grammar, renderer compatibility, layout, and export troubleshooting that does not require C4 level/model decisions.software-architecture for architecture drivers, tradeoffs, decisions, and fitness evidence; this skill visualizes those decisions rather than owning them.web-accessibility for complete WCAG/ARIA conformance work and assistive-technology evidence; this skill contributes diagram-specific accessibility checks and fallbacks.© magnus919, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 7 other files (references) in c4-diagramming of magnus919/agent-skills.
Open the folder on GitHubat commit 22b4723
C4 Diagramming 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| C4 Diagramming this skillmagnus919/agent-skills | 115 | — | ~2k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 82k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT | |
| GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram | 18k | — | ~427 | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.5k | — | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| Mermaid Diagramsjjmartres/opencode | 133 | 6 repos | ~1.9k | Automated safety check: Pass | MIT |
tt-a1i/archify
Creates interactive architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone HTML with inline SVG, themes and image or video export.
Unclecheng-li/AI_Animation
Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.
ahmedkhaleel2004/gitdiagram
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
jjmartres/opencode
Helps an agent pick the right Mermaid diagram type and write the syntax for class, sequence, flow, ER, C4, state and other software diagrams.
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
magnus919/agent-skills
Organize durable agent research outputs as summaries, analysis, and evidence dossiers.
magnus919/agent-skills
Build portable, first-person colored ASCII city engines and small GIS-derived city packs.
magnus919/agent-skills
Manage color workflows with ICC profiles, working spaces, gamut mapping, and color science.
magnus919/agent-skills
A skill your agent uses for PhD-level expertise in data science, statistics, and machine learning: rigorous statistical analysis, experimental design, causal inference, advanced modeling, research…
magnus919/agent-skills
Use Docker Compose to define, run, debug, and harden multi-container applications.
magnus919/agent-skills
Design, review, simulate, and verify FPGA logic using explicit RTL contracts, clock and reset models, CDC analysis, timing constraints, and reproducible implementation evidence.
Works with
Categories
Create and review C4 software-architecture diagrams using Mermaid or Structurizr. C4 Diagramming is an agent skill from magnus919/agent-skills. Create and review C4 software-architecture diagrams using Mermaid or Structurizr.
C4 Diagramming fits situations like: teams need a communication-ready system context; code-level view; including audience; mermaid syntax/rendering work without C4 modeling.
Run `npx skills add magnus919/agent-skills --skill c4-diagramming -a claude-code`. Or copy the skill folder (c4-diagramming in magnus919/agent-skills) into .claude/skills/c4-diagramming in your project. Claude Code loads it when a task matches its description.
Run `npx skills add magnus919/agent-skills --skill c4-diagramming -a codex`. Or copy the skill folder (c4-diagramming in magnus919/agent-skills) into .agents/skills/c4-diagramming in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add magnus919/agent-skills --skill c4-diagramming -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/c4-diagramming, .gemini/skills/c4-diagramming, .github/skills/c4-diagramming and .opencode/skills/c4-diagramming in your project.
SKILL.md names no scripts, command-line tools or credentials: C4 Diagramming is instructions for the agent only. Our summary lists: Docker. Compatibility (from SKILL.md): Mermaid or Structurizr tooling is optional and only needed to render or validate diagrams..
SKILL.md names 2 domains. As links in the text: github.com and c4model.com. This is read from the text; nothing was executed.
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.
C4 Diagramming is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 7k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with C4 Diagramming: Archify Diagrams (tt-a1i/archify, 82k stars), Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars), GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars) and Code Graph Mermaid Diagrams (trailofbits/skills, 7.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
magnus919 (a GitHub user) maintains it in magnus919/agent-skills, which has 115 GitHub stars. The repository holds 131 skills in this directory. The repository was last updated on October 10, 2026.
Source: magnus919/agent-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.