Agent skill

C4 Diagramming

by magnus919 in magnus919/hermes-profiles

C4 Model structural views — System Context, Container, Component, and Code diagrams.

MITAuto-check passedDevelopment

Install C4 Diagramming

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/architecture/c4-diagramming .claude/skills/c4-diagramming && rm -rf skills-src

Use ~/.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/

Paste into Claude Code

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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

$skill-installer install https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/c4-diagramming

Type 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.

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/architecture/c4-diagramming .agents/skills/c4-diagramming && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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.

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/architecture/c4-diagramming .cursor/skills/c4-diagramming && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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

$ gemini skills install https://github.com/magnus919/hermes-profiles.git --path skills/architecture/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.

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/architecture/c4-diagramming .gemini/skills/c4-diagramming && rm -rf skills-src

Use ~/.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/

Paste into Gemini CLI

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming

Installs 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).

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/architecture/c4-diagramming .github/skills/c4-diagramming && rm -rf skills-src

Use ~/.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/

Paste into GitHub Copilot

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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.

skills CLI

$ npx skills add magnus919/hermes-profiles --skill c4-diagramming -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install magnus919/hermes-profiles c4-diagramming --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/magnus919/hermes-profiles.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/architecture/c4-diagramming .opencode/skills/c4-diagramming && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "c4-diagramming" agent skill from https://github.com/magnus919/hermes-profiles/tree/main/skills/architecture/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.

Facts

Skill name: c4-diagramming
GitHub stars: 289
Token cost: ~1.4k tokens
SKILL.md length: 531 words
Files: 4 (incl. references)
Skills in repo: 31
Repo updated: Jun 27, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

C4 Model structural views — System Context, Container, Component, and Code diagrams.

The technical-architect profile needs to produce structural architecture diagrams
SKILL.md covers C4-to-Pyramid Mapping, Authoring Formats, Contents and GitHub Rendering Constraint, plus 2 more sections
Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
Tasks that involve Diagrams

What it does

C4 Diagramming is an agent skill from magnus919/hermes-profiles. C4 Model structural views — System Context, Container, Component, and Code diagrams. Maps C4 zoom levels to Artifact Pyramid layers (Context→L1, Container/Component→L2, Code→L3). Use when the technical-architect profile needs to produce structural architecture diagrams.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/architecture-as-code-ecosystem.md`, `references/c4-to-pyramid-mapping.md` and `references/ci-pipeline-templates.md`).

It sits in Development, covering Diagrams. It works with Mermaid and GitHub. The repository describes itself as: Curated Hermes Agent profiles for specialist swarms — opinionated, Hermes-optimized, artifact-pyramid native. The licence is MIT.

When your agent uses it

The technical-architect profile needs to produce structural architecture diagrams
Tasks that involve Diagrams

Example prompts

“/c4-diagramming”

Requirements

Docker

What it can do on your machine

Read from SKILL.md and the folder at commit 867a555. It shows what the files ask for, not the result of running them.

Tool permissions
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.
Runs code
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.
Network
Links to these hosts (documentation or services it may open):
- github.com
- c4model.com
- magnus919.com
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

C4 Diagramming loads about 1.4k tokens when it runs, and up to ~7.4k if it reads all its reference files. Until then it costs about 71 tokens; SKILL.md has 531 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~71
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them: ~7.4k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from magnus919/hermes-profiles at commit 867a555, republished under its MIT licence (© magnus919). 531 words, ~1,406 tokens.

Download SKILL.mdSave it as .claude/skills/c4-diagramming/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.

name: c4-diagramming
description: C4 Model structural views — System Context, Container, Component, and Code diagrams. Maps C4 zoom levels to Artifact Pyramid layers (Context→L1, Container/Component→L2, Code→L3). Use when the technical-architect profile needs to produce structural architecture diagrams.

C4 Diagramming

C4 Model for structural architecture visualization. Produces diagrams at four zoom levels, mapped into the artifact pyramid.

C4-to-Pyramid Mapping

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.

Authoring Formats

Mermaid (Default for Quick Diagrams)

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 (Recommended for Long-Lived Projects)

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/AsciiDoc
Structurizr Lite (Docker) — local preview at http://localhost:8081
CI commands: validate, 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-levels.md — per-level detail: purpose, audience, what to model, pitfalls
references/c4-to-pyramid-mapping.md — context→L1, container/component→L2, code→L3 (Mermaid + Structurizr DSL paths)
references/c4-to-flowchart.md — (in mermaid-diagrams skill) C4 → standard flowchart conversion patterns for GitHub compatibility
references/architecture-as-code-ecosystem.md — Structurizr DSL, C4-PlantUML, docToolChain, converged repo convention, tool comparison table
references/ci-pipeline-templates.md — GitHub Actions, GitLab CI, ForgeJo (Gitea Actions, Woodpecker) pipeline templates for Structurizr validation, export, deploy

Show full SKILL.md (260 more words)Show less

GitHub Rendering Constraint

GitHub'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 label
System() / System_Ext() → [rect] inside or outside subgraphs
Container() → [rect with tech stack label]`
Db() → [(cylinder shape)]
System_Boundary{} / Container_Boundary{} → subgraph ... end
Rel() → -- label --> or -.->
Drop UpdateLayoutConfig() — use flowchart LR or TB directive instead

For the full conversion table with worked examples of all three C4 levels, load skill_view(name='mermaid-diagrams', file_path='references/c4-to-flowchart.md').

.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.

Feature Request Filed

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.

Canonical Reference

Simon Brown, "The C4 Model" — https://c4model.com/
Magnus Hedemark, "Clanker Technical Architect: First on the Scene with Progressive Disclosure" — https://magnus919.com/2026/05/clanker-technical-architect-first-on-the-scene-with-progressive-disclosure/
GroktoPlan C4 Diagrams (worked examples) — https://github.com/groktopus/groktoplan/blob/main/TECHNICAL_ARCHITECTURE.md

Files

SKILL.md and 3 other files (references) in skills/architecture/c4-diagramming of magnus919/hermes-profiles.

SKILL.md
references/architecture-as-code-ecosystem.md
references/c4-to-pyramid-mapping.md
references/ci-pipeline-templates.md

Open the folder on GitHubat commit 867a555

Compare with similar skills

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.

C4 Diagramming compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
C4 Diagramming this skillmagnus919/hermes-profiles	289	—	~1.4k	Automated safety check: Pass	MIT	3 mo ago
GitDiagram Repository Overviewahmedkhaleel2004/gitdiagram	18k	—	~427	Automated safety check: Pass	MIT	yesterday
Design Doc MermaidSpillwaveSolutions/design-doc-mermaid	176	1 repos	~5.6k	Automated safety check: Pass	None	1 mo ago
GitDiagram Repo Architectureahmedkhaleel2004/gitdiagram	18k	—	~429	Automated safety check: Pass	MIT	yesterday
Deep Repository Architecture Analyzeryzddmr6/repo-analyzer	492	—	~2.2k	Automated safety check: Pass	MIT	5 mo ago
Work Issuejoesaby/astro-mermaid	123	—	~891	Automated safety check: Pass	MIT	2 mo ago

Similar skills

GitDiagram Repository Overview
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.
18k GitHub stars~427 tokensUpdated yesterday
DevelopmentAuto-check passed
Design Doc Mermaid
SpillwaveSolutions/design-doc-mermaid
Create Mermaid diagrams (flowchart, sequence, class, ER, state, C4, architecture) from text or source code.
176 GitHub starsUsed in 1 repo~5.6k tokens
DevelopmentAuto-check passed
GitDiagram Repo Architecture
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
18k GitHub stars~429 tokensUpdated yesterday
DevelopmentAuto-check passed
Deep Repository Architecture Analyzer
yzddmr6/repo-analyzer
Produces an in-depth architecture report on an open-source project or framework, explaining why it is designed the way it is rather than just what the code does.
492 GitHub stars~2.2k tokensUpdated 5 mo ago
DevelopmentAuto-check passed
Work Issue
joesaby/astro-mermaid
End-to-end workflow for resolving a GitHub issue in astro-mermaid — triages complexity, then runs brainstorm → TDD → implement → docs/spec → code review at the right depth.
123 GitHub stars~891 tokensUpdated 2 mo ago
DevelopmentAuto-check passed
Domain Diagram
shuotao/REVIT_MCP_study
引導剛寫完 domain 的老師把 SOP 流程圖像化：先討論主流程、做流程健檢（迴圈／死路／缺口），再把流程整理成結構化 spec，交由 .claude/skills/domain-diagram/scripts/mermaidfromspec.py 確定性地產出 GitHub 原生 mermaid 圖與健檢結論並回嵌…
102 GitHub stars~816 tokensUpdated 1 mo ago
DevelopmentAuto-check passed

Questions about C4 Diagramming

What does C4 Diagramming do?

C4 Model structural views — System Context, Container, Component, and Code diagrams. C4 Diagramming is an agent skill from magnus919/hermes-profiles. C4 Model structural views — System Context, Container, Component, and Code diagrams.

When should I use C4 Diagramming?

C4 Diagramming fits situations like: the technical-architect profile needs to produce structural architecture diagrams; tasks that involve Diagrams.

How do I install C4 Diagramming in Claude Code?

Run `npx skills add magnus919/hermes-profiles --skill c4-diagramming -a claude-code`. Or copy the skill folder (skills/architecture/c4-diagramming in magnus919/hermes-profiles) into .claude/skills/c4-diagramming in your project. Claude Code loads it when a task matches its description.

How do I install C4 Diagramming in Codex?

Run `npx skills add magnus919/hermes-profiles --skill c4-diagramming -a codex`. Or copy the skill folder (skills/architecture/c4-diagramming in magnus919/hermes-profiles) into .agents/skills/c4-diagramming in your project. Codex loads it when a task matches its description.

Can I use C4 Diagramming in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add magnus919/hermes-profiles --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.

What does C4 Diagramming need to run?

SKILL.md names no scripts, command-line tools or credentials: C4 Diagramming is instructions for the agent only. Our summary lists: Docker.

Does C4 Diagramming access the network?

SKILL.md names 3 domains. As links in the text: github.com, c4model.com and magnus919.com. This is read from the text; nothing was executed.

Is C4 Diagramming safe to install?

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.

What licence does C4 Diagramming use?

C4 Diagramming is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does C4 Diagramming use?

About 1.4k tokens (SKILL.md is roughly 5.6k 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 6k tokens, read only when the agent opens those files.

What are the alternatives to C4 Diagramming?

Skills that share tags, products or a category with C4 Diagramming: GitDiagram Repository Overview (ahmedkhaleel2004/gitdiagram, 18k stars), Design Doc Mermaid (SpillwaveSolutions/design-doc-mermaid, 176 stars), GitDiagram Repo Architecture (ahmedkhaleel2004/gitdiagram, 18k stars) and Deep Repository Architecture Analyzer (yzddmr6/repo-analyzer, 492 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains C4 Diagramming?

magnus919 (a GitHub user) maintains it in magnus919/hermes-profiles, which has 289 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on June 27, 2026.

Source: magnus919/hermes-profiles on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install C4 Diagramming

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

C4 Diagramming

C4-to-Pyramid Mapping

Authoring Formats

Mermaid (Default for Quick Diagrams)

Structurizr DSL (Recommended for Long-Lived Projects)

Contents

GitHub Rendering Constraint

Feature Request Filed

Canonical Reference

Files

Compare with similar skills

Similar skills

More from magnus919/hermes-profiles

Related

Questions about C4 Diagramming