mcpField
S
show-me-diagram

show-me-diagram

github.com/yahyabedirhanDesign & UI249 installsUpdated 6d ago
Repository

About show-me-diagram

show-me-diagram guides agents in creating a browser-openable diagram to explain a topic to a user. It combines diagram-design guidance with a selected profile and checks the exported SVG's borders.

Key features

  1. 01Apply diagram-design and a profile
  2. 02Choose a diagram type for the topic
  3. 03Split diagrams with many nodes
  4. 04Check SVG borders and export at 2x
  5. 05Open the diagram for the user

Use cases

  1. 01Explain a process with a flowchart
  2. 02Show structure, status, or progress visually

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/yahyabedirhan/skills --skill show-me-diagram

After installing, type/show-me-diagramin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

profiles/
cursor-dark.md
graphite.md
index.md
navy-blue.md
parchment.md
shipyard-green.md

Details

From the project README

Show the topic as one diagram the user opens in a browser. The diagram is for the user's own understanding, so stay with plain text when you only need to explain something to another agent.

  1. Load the diagram-design skill and follow it for the build. Don't restate or replace its rules, since it changes upstream.
  2. Use the profile the user names; otherwise use the default that profiles/index.md marks. Read that profile from profiles/ beside this file and apply its choices on top of diagram-design's style guide for this diagram. Don't save it into diagram-design's install or profile library, since other projects share them.
  3. Pick the diagram type that fits the point, from the types diagram-design lists: a flowchart or sequence for a process, a state machine for status, a tree or layer stack for structure, a timeline for progress. Make one diagram per point. Above about nine nodes, split it.
  4. Check the borders before you show it. Draw each outline after every fill next to it, and put focal outlines last in the SVG, since a later fill paints over half of an earlier border. Export or screenshot at 2x, since 1px lines smear across two pixels at 1x. Zoom in and check that every border is the same width on all sides.
  5. Open the file for the user, with one or two lines on what it shows. Keep the rest of the reply short, since the diagram carries the point.

References

  • profiles/index.md: the profiles, which one is the default, and the layers every profile fills in, and how to check one.

Comments

Markdown supported