Skip to content
Get packs

Smart Diagram Picker

Picks the smallest useful diagram (pseudocode, tree, Mermaid, diff) to explain structure in chat.

Source Download skill
Repository
Yeachan-Heo/oh-my-claudecode
Stars
40,512
Licence
MIT
Files
1 file

What it does

When an explanation involves control flow, call structure, module ownership or a change in shape, the agent is told to use one compact visual instead of a long wall of text. It chooses from pseudocode, call trees, component or file trees, Mermaid diagrams, or diffs, and skips visuals when a sentence is enough. For rare cases like UI layouts, it may write one standalone HTML file and open it in the browser.

Great for

  • Developers asking how a piece of code flows or is organised
  • People who want a quick visual summary of a design or change
  • Anyone who finds long prose hard to follow for structural questions

Skip it if

  • Simple questions that a sentence answers well, since the skill itself says to skip visuals then
  • Users who need a precise, verified architecture document, because the diagrams are only as accurate as what the agent has read

Try asking

  • “Explain the control flow of the lock handling in this file as a short diagram”
  • “Show me a call tree for how the save function reaches the database layer”
  • “Diagram how the settings page components are nested and which ones fetch data”
  • “Show a before-and-after diff of how this change reorganises the tools folder”
Step-by-step guide: how to use Smart Diagram PickerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    diagram.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip diagram.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip diagram.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the specific function, file or question you want visualised so the agent picks the right view
  • Ask for a single diagram if you only want one view; the skill itself limits itself to one or two
  • If you want an HTML file, expect it to be written to disk and opened with your system's default opener

What's inside

  • SKILL.md

Redistributed unmodified from Yeachan-Heo/oh-my-claudecode under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.