Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
This skill enables solutions architects and product managers to produce precise technical diagrams, ranging from IT current-state maps and data flow models to user journeys and story maps. It transforms complex system dependencies into structured visual assets in HTML, SVG, or PNG formats.
By supporting a wide array of specialized layouts—including Wardley maps, dependency graphs, and database schemas—the tool ensures that architectural deltas and deployment flows remain consistent with professional branding standards.
WHO IT'S FOR
Solutions Architects
creating branded architecture and data flow diagrams
Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.
In Claude Code, run `/plugin`, open Marketplaces, select diagram-design, and choose Enable auto-update. If prompted, enter `/reload-plugins` in the Claude Code session; otherwise the next session loads the update.
Installs: Installs the complete diagram-design plugin from the repository marketplace, whose plugin manifest exposes the repository skills directory. · Codex
Run these commands in a terminal to add the repository marketplace and install the diagram-design plugin.
Installs: Installs the complete repository marketplace plugin, including the shared Diagram Design skill and its doctor, export, import, and profile capabilities. · GitHub Copilot
Run these commands in a terminal to add the repository marketplace and install the diagram-design plugin.
In a terminal, confirm that GitHub Copilot discovered the installed skill.
copilot skill list
After confirming discovery, ask GitHub Copilot for a diagram in natural language. As an alternative discovery check, the author documents entering `/skills` in an interactive Copilot session.
Installs: Clones the complete diagram-design repository into the documented local checkout and registers that checkout as a Pi package; Pi discovers the shared skill through the repository's standard skills directory. · Pi
Run this command in a terminal to clone the repository into the author's documented editable-checkout location.
Installs: Clones the complete diagram-design repository into the documented local checkout and links its shared Diagram Design skill into Claude Code's skill directory. · Claude Code
Run this command in a terminal to clone the repository into the author's documented editable-checkout location.
A concise description of the app's main components and connections
For first use: a website URL, installed skill, local design-system folder, pasted design tokens, saved profile, or permission to keep the default style
Using the diagram-design skill, make an architecture diagram of my app. Before drawing, follow the skill's first-time style-guide check; ask me to choose a brand source or explicitly keep the default if the project has not been customized.
For first use: the desired style-guide choice or permission to keep the default style
Using the diagram-design skill, redraw this Mermaid diagram at the right size and detail level. Start with a static result unless motion materially clarifies an ordered change.
Claude
Codex
Cursor
Copilot
Amp
OpenCode
Kiro
Hermes
Factory Droid
Cline