Guide · Agent skill
How to use the Smart Diagram Picker agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The diagram skill tells an AI agent to draw a small visual when an explanation involves control flow, call structure, module ownership or a change in shape. Instead of a long wall of text, the reader gets one compact view such as a call tree, file tree, Mermaid diagram or diff. This guide covers what the skill does, how to install it from the ZIP, how to trigger it with plain requests and where its limits are.
Smart Diagram PickerYeachan-Heo/oh-my-claudecode · MIT Download the skill Quick start
- 1Download the ZIP. Download the diagram skill ZIP from the directory page.
- 2Unzip into the skills folder. Unzip into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project.
- 3Or upload in the Claude apps. In the Claude apps, open Settings, then Capabilities, then Skills, and upload the skill.
- 4Ask a structural question. Ask how code flows, how modules are organised or how a change reshapes the design.
- 5Review the visual. Check the diagram beside the sentences it supports and compare it with the code.
What is an agent skill and what does the diagram skill do?
An agent skill is a folder containing a SKILL.md file with instructions that an AI agent reads when a task matches the skill's description. The diagram skill is one such instruction set, taken from the skills folder of the Yeachan-Heo/oh-my-claudecode project and licensed MIT.
When a question needs structure, such as how code flows, how deep calls go, who owns which module or how a change reshapes a design, the skill directs the agent to pick the smallest view that shows that shape. The options it lists are pseudocode, call tree, component or file tree, Mermaid diagram and diff. The skill also says to skip visuals when a sentence already answers the question.
- Pseudocode: logic with the branching shown, without language syntax.
- Call tree: runtime control flow, with depth showing who owns the flow.
- Component or file tree: where modules, components or responsibilities live.
- Mermaid diagram: interactions between parties, dataflow or state transitions.
- Diff: the shape of a change, matched to the topic.
- Standalone HTML file: only for rare cases such as UI layouts or before/after comparisons, opened in the browser.
Install the diagram skill from the ZIP
Download the ZIP for the diagram skill from the directory page. The skill is a single file, SKILL.md, so the unzipped folder is small.
For a personal install, unzip it into ~/.claude/skills/. To make it available only inside one project, unzip it into that project's .claude/skills/ folder. Either way, the skill folder should contain SKILL.md.
If you use the Claude apps instead, open Settings, then Capabilities, then Skills, and upload the skill there.
- Personal install: ~/.claude/skills/
- Single project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload
How do you trigger the diagram skill?
You do not need a special command. The skill is picked up when your request matches its description, which is about structure: control flow, call depth, module ownership or change shape. Ask the way you would ask a colleague to explain something, and say when you want to see how it fits together.
Requests that name a structure work best. Phrases like 'show me how this flows' or 'draw the file layout' point the agent toward a visual. A simple factual question will usually get a sentence back, which is what the skill intends.
- 'Show me the call tree for how the save function runs.'
- 'Draw the file layout of the auth module and what each folder owns.'
- 'Diagram the sequence between the CLI and the hook when a tool is used.'
- 'What changes shape if we move the state file handling into its own folder? Show the diff.'
- 'Walk me through the control flow of this retry logic as pseudocode.'
What does a good result look like?
Expect one compact visual placed next to the few sentences it supports. The skill asks the agent to show only the calls, files, components or states that answer your question, so a large system should come back as a focused slice rather than everything at once.
Each view has a specific use. A file tree is kept shallow with one note per directory. A diff shows only the changed lines in context. A Mermaid block shows interaction order. If you need a different level of detail, ask for it directly, for example a deeper call tree or only the first two layers.
- Pick one view for a question; the skill allows two at most.
- Ask for a narrower or deeper view if the first one is too much or too little.
- Ask for the complete block when you need the exact order of steps or ownership.
Safety notes: scripts and network
The skill is a single instruction file. Its listed requirements are none, it does not run scripts and it does not use the network. Everything it produces appears in the conversation as text or Mermaid, except in rare cases where the agent writes one HTML file.
When the skill does write an HTML file, it is meant to be opened with the platform opener: start on Windows, open on macOS or xdg-open on Linux. Check the file before you rely on it, as with any generated output.
- Runs scripts: no
- Uses network: no
- Requirements listed: none
- Only file output: at most one standalone HTML file, in rare cases
Tips for getting accurate diagrams
A diagram is only as accurate as what the agent has read. If the agent has not opened the relevant files, the call tree or file tree may be incomplete. Point it at the files or folder you care about so it works from real code.
Use the diagram as a reading aid, not as official documentation. If you need a verified architecture document, check the diagram against the source code or ask a reviewer to confirm it.
- Name the files, folder or function you want covered.
- Ask for the complete block when elision would hide ownership or order.
- Compare the visual against the code before sharing it with a team.
What people use it for
- Showing the call tree for a function so you can see which helpers it calls and in what order.
- Drawing a file tree that explains which folder owns hooks, tools or workflow logic.
- Producing a Mermaid sequence diagram of how a CLI and a hook exchange messages.
- Presenting a diff of a control-flow or file-layout change in a code review or design discussion.
Frequently asked questions
How do I install the diagram agent skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Does the diagram skill require anything else to run?
The skill lists no requirements. It does not run scripts and does not use the network, according to its listing.
Is the diagram skill free?
The skill is released under the MIT licence. This page does not state pricing for the wider Claude product, so check your own plan for that.
What kinds of diagrams does the skill produce?
It chooses from pseudocode, call trees, component or file trees, Mermaid diagrams and diffs. In rare cases such as UI layouts, it may write one standalone HTML file and open it in the browser.
Why did the agent answer with a sentence instead of a diagram?
The skill tells the agent to skip visuals when prose already answers the question. Ask explicitly for a call tree, file tree or diagram if you want one.
Can I trust the diagrams for documentation?
Not without checking. The skill's output is only as accurate as what the agent has read, so verify it against the source code before using it as a verified architecture document.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use the diagram skill if you are a developer who wants a quick visual of how code flows, how files are organised or how a change reshapes a design, and if you find long prose hard to follow for structural questions. Skip it for simple questions a sentence answers well, and for any case where you need a precise, verified architecture document, since the diagrams are only as accurate as what the agent has read.
Download the skill