Understand and recover
The /diagram Skill
Turn code or a process into a saved diagram you can inspect and share.
Read the agent instructions ↗On this page
When to use it
You need to see a sequence, flow, data model, state machine, or architecture.
Try it with your agent
/diagram Draw the sign-in sequence from this code and save it as Markdown.What you get
- A Markdown file containing diagram DSL.
- An optional rendered image and its path or renderer link.
Requirements and boundaries
- Enough source code, text, or data to establish the relationships.
- Browser access to the ZenUML renderer when an image is requested.
Sequence diagrams use ZenUML; other diagram types use Mermaid. An explicit user choice takes priority.
The package includes syntax references and detailed SVG rules. SVG revisions preserve nodes and relationships unless redesign is authorized.
The optional web renderer receives the diagram DSL in its URL; inspect the diagram content before using it for sensitive material.
Install with the official skills CLI. Version 1.7.0 requires Node.js 22.20.0 or later, npm/npx, Git, and network access. The command pins this catalogue’s source branch to master; @latest may change CLI requirements.
Installation defaults to the current project. The CLI lets you select agents and symlink or copy files; add --global only when you want a user-wide installation. Update with npx skills update. Review local changes before updating; this catalogue does not provide a backup guarantee.
Install diagram
Choose your agent, then run the command in your terminal. Read the installation guide for package setup and update notes.
npx skills@latest add https://github.com/MrCoder/mrcoder.github.io/tree/master --skill diagram