Code Graph Mermaid Diagrams
trailofbits/skills
Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps and attack surface data flows.
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
Install GitDiagram Repository Overview
$ npx skills add ahmedkhaleel2004/gitdiagram --skill gitdiagram -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install ahmedkhaleel2004/gitdiagram gitdiagram --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/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .claude/skills/gitdiagram && 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 "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .claude/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagramType 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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install ahmedkhaleel2004/gitdiagram gitdiagram --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .agents/skills/gitdiagram && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .agents/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install ahmedkhaleel2004/gitdiagram gitdiagram --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .cursor/skills/gitdiagram && 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 "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .cursor/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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/ahmedkhaleel2004/gitdiagram.git --path plugins/gitdiagram/skills/gitdiagram--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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install ahmedkhaleel2004/gitdiagram gitdiagram --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .gemini/skills/gitdiagram && 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 "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .gemini/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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 ahmedkhaleel2004/gitdiagram gitdiagramInstalls 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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .github/skills/gitdiagram && 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 "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .github/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install ahmedkhaleel2004/gitdiagram gitdiagram --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/ahmedkhaleel2004/gitdiagram.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/gitdiagram/skills/gitdiagram .opencode/skills/gitdiagram && 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 "gitdiagram" agent skill from https://github.com/ahmedkhaleel2004/gitdiagram/tree/main/plugins/gitdiagram/skills/gitdiagram into .opencode/skills/gitdiagram/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gitdiagram", 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
gitdiagram- GitHub stars
- 18k
- Token cost
- ~427 tokens
- SKILL.md length
- 178 words
- Files
- 1
- Skills in repo
- 2
- Repo updated
- First seen
- Licence
- MIT
At a glance
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram.
- Works in 4 steps: If you only have a project name, call… → Call get_repository_diagram with… → Answer from the result: a short summary… → …
- Getting an overview of how an open-source project is structured
- Reaches gitdiagram.com
- Asking for an architecture diagram of a public GitHub repository
What it does
When you name a public GitHub repository, as owner/repo or as a URL, the agent asks GitDiagram for its diagram and answers from the result. You get a short summary of how the codebase is organized, the main components with their source paths, and how they connect. The Mermaid source is included when you asked for a diagram, along with a link to the interactive version where each component opens its code.
If the agent only has a project name, it first calls the find_repository_diagrams tool of the gitdiagram MCP server, then get_repository_diagram. When no diagram exists yet, you receive a link that generates one for free in about a minute once opened in a browser. Without the MCP tools, the agent fetches the Markdown version from gitdiagram.com. Only public repositories are covered, and the diagrams are AI-made overviews, so specific claims should be checked against the source.
When your agent uses it
- Getting an overview of how an open-source project is structured
- Asking for an architecture diagram of a public GitHub repository
- Mapping the data flow of an unfamiliar library before contributing to it
Example prompts
- “/gitdiagram fastapi/fastapi”
- “Map out the architecture of vercel/next.js and give me the Mermaid diagram.”
- “Explain how data flows through the ahmedkhaleel2004/gitdiagram repository.”
Requirements
- Network access to gitdiagram.com
- The gitdiagram MCP server, or the ability to fetch pages from gitdiagram.com
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- If you only have a project name, call the find_repository_diagrams tool from the gitdiagram MCP server to find its exact owner/repo.
- Call get_repository_diagram with owner/repo or the GitHub URL.
- Answer from the result: a short summary of how the codebase is organized, the main components with their source paths, and how they…
- If GitDiagram has no diagram yet, give the user the link from the result: opening it in a browser generates one for free in about a…
What it can do on your machine
Read from SKILL.md and the folder at commit 941c61e. 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
Hosts in commands or code, which the agent is likely to contact:
gitdiagram.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
GitDiagram Repository Overview loads about 427 tokens when it runs. Until then it costs about 120 tokens; SKILL.md has 178 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.
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 ahmedkhaleel2004/gitdiagram at commit 941c61e, republished under its MIT licence (© ahmedkhaleel2004). 178 words, ~427 tokens.
Download SKILL.mdSave it as
.claude/skills/gitdiagram/SKILL.md (or your agent's skills folder).- name
- gitdiagram
- description
- Show the architecture of a public GitHub repository with GitDiagram (gitdiagram.com) - a written explanation, its main components and source paths, how they connect, and a Mermaid diagram. Use when the user wants to understand, map, visualize or get an overview of a GitHub repository or open-source project's architecture, structure or data flow, or asks for an architecture diagram of a repo, e.g. "/gitdiagram fastapi/fastapi" or "how is vercel/next.js structured?".
- argument-hint
- [owner/repo or GitHub URL]
GitDiagram
Explain the architecture of the GitHub repository the user named (owner/repo or a GitHub URL) with GitDiagram.
- If you only have a project name, call the
find_repository_diagramstool from thegitdiagramMCP server to find its exactowner/repo. - Call
get_repository_diagramwithowner/repoor the GitHub URL. - Answer from the result: a short summary of how the codebase is organized, the main components with their source paths, and how they connect. Include the Mermaid source when the user asked for a diagram, and the interactive diagram link (
https://gitdiagram.com/owner/repo), where each component opens its code. - If GitDiagram has no diagram yet, give the user the link from the result: opening it in a browser generates one for free in about a minute. Then offer to read it again.
If the gitdiagram MCP tools are not available, fetch https://gitdiagram.com/owner/repo.md instead: it is the same diagram as Markdown (a 404 means there is no diagram yet).
GitDiagram covers public repositories only. Its diagrams are AI-made overviews, so check specific claims against the source before relying on them.
© ahmedkhaleel2004, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in plugins/gitdiagram/skills/gitdiagram of ahmedkhaleel2004/gitdiagram.
Open the folder on GitHubat commit 941c61e
Compare with similar skills
GitDiagram Repository Overview 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 |
|---|---|---|---|---|---|---|
| GitDiagram Repository Overview this skillahmedkhaleel2004/gitdiagram | 18k | — | ~427 | Automated safety check: Pass | MIT | |
| Code Graph Mermaid Diagramstrailofbits/skills | 7.4k | — | ~1.7k | Automated safety check: Pass | CC-BY-SA-4.0 | |
| Deep Repository Architecture Analyzeryzddmr6/repo-analyzer | 491 | — | ~2.2k | Automated safety check: Pass | MIT | |
| Archify Diagramstt-a1i/archify | 81k | — | ~2.9k | Automated safety check: Pass | MIT | |
| Archify Diagram BuilderUnclecheng-li/AI_Animation | 1.5k | 2 repos | ~4.1k | Automated safety check: Pass | MIT | |
| Excalidraw Skillyctimlin/mcp_excalidraw | 2.5k | — | ~4.6k | Automated safety check: Pass | MIT |
Similar skills
- Official
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.
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.
Archify Diagram Builder
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.
Excalidraw Skill
yctimlin/mcp_excalidraw
Excalidraw canvas toolkit for creating, editing, and refining diagrams on a live canvas.
Deepwiki Rs
sopaco/deepwiki-rs
AI-powered Rust documentation generation engine for comprehensive codebase analysis, C4 architecture diagrams, and automated technical documentation.
More from ahmedkhaleel2004/gitdiagram
GitDiagram Repo Architecture
ahmedkhaleel2004/gitdiagram
Explains how a public GitHub repository is built by fetching its GitDiagram architecture diagram, components and optional explainer video.
Related
Works with
Categories
Questions about GitDiagram Repository Overview
What does GitDiagram Repository Overview do?
Explains the architecture of a public GitHub repository through GitDiagram: how the code is organized, the main components with paths, and a Mermaid diagram. When you name a public GitHub repository, as owner/repo or as a URL, the agent asks GitDiagram for its diagram and answers from the result. You get a short summary of how the codebase is organized, the main components with their source paths, and how they connect.
When should I use GitDiagram Repository Overview?
GitDiagram Repository Overview fits situations like: getting an overview of how an open-source project is structured; asking for an architecture diagram of a public GitHub repository; mapping the data flow of an unfamiliar library before contributing to it.
How do I install GitDiagram Repository Overview in Claude Code?
Run `npx skills add ahmedkhaleel2004/gitdiagram --skill gitdiagram -a claude-code`. Or copy the skill folder (plugins/gitdiagram/skills/gitdiagram in ahmedkhaleel2004/gitdiagram) into .claude/skills/gitdiagram in your project. Claude Code loads it when a task matches its description.
How do I install GitDiagram Repository Overview in Codex?
Run `npx skills add ahmedkhaleel2004/gitdiagram --skill gitdiagram -a codex`. Or copy the skill folder (plugins/gitdiagram/skills/gitdiagram in ahmedkhaleel2004/gitdiagram) into .agents/skills/gitdiagram in your project. Codex loads it when a task matches its description.
Can I use GitDiagram Repository Overview 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 ahmedkhaleel2004/gitdiagram --skill gitdiagram -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gitdiagram, .gemini/skills/gitdiagram, .github/skills/gitdiagram and .opencode/skills/gitdiagram in your project.
What does GitDiagram Repository Overview need to run?
SKILL.md names no scripts, command-line tools or credentials: GitDiagram Repository Overview is instructions for the agent only. Our summary lists: Network access to gitdiagram.com; The gitdiagram MCP server, or the ability to fetch pages from gitdiagram.com.
Does GitDiagram Repository Overview access the network?
SKILL.md names 1 domain. In commands or code: gitdiagram.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is GitDiagram Repository Overview 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 GitDiagram Repository Overview use?
GitDiagram Repository Overview 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 GitDiagram Repository Overview use?
About 427 tokens (SKILL.md is roughly 1.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to GitDiagram Repository Overview?
Skills that share tags, products or a category with GitDiagram Repository Overview: Code Graph Mermaid Diagrams (trailofbits/skills, 7.4k stars), Deep Repository Architecture Analyzer (yzddmr6/repo-analyzer, 491 stars), Archify Diagrams (tt-a1i/archify, 81k stars) and Archify Diagram Builder (Unclecheng-li/AI_Animation, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains GitDiagram Repository Overview?
ahmedkhaleel2004 (a GitHub user) maintains it in ahmedkhaleel2004/gitdiagram, which has 18,007 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on October 8, 2026.
Source: ahmedkhaleel2004/gitdiagram on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.