Diagrams and Infographics skills for Claude Code and Codex
Skills that draw architecture diagrams, flowcharts, Mermaid, draw.io, Excalidraw and PlantUML files, and infographics.
Highest-scoring diagram and infographic skills in the October 22, 2026 snapshot: diagramming-code from trailofbits/skills (89/100), archify from tt-a1i/archify (87/100) and dashmotion from csthink/dashmotion (80/100). Scores come from the Suede Skill Check.
- 19 listed skills
- 10 repositories
- 7 with full pages
8 from official publishers. 9 bundle scripts. 3 connect to an outside service. Listed in Video, Image, Audio and Creative (13), Frontend and Design (2), Security (1), Developer Tools and Frameworks (1), Documents and Office Files (1), Writing and Editing (1).
All 19 diagram and infographic skills
No matching skills. Try fewer words or clear your search.
| Skill | Repository | What it does |
|---|---|---|
| archify 87/100 · B | tt-a1i/archify | Creates validated architecture, workflow, sequence, data-flow, state, and class diagrams as standalone HTML with inline SVG and image, SVG, or WebM export. |
| architecture-diagram-creator 78/100 · C | mhattingpete/claude-skills-marketplace | Creates HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment for system documentation and high-level overviews. |
| crypto-protocol-diagram 87/100 · B | trailofbits/skills | Extracts protocol message flow from source code, RFCs, papers, pseudocode, or ProVerif and Tamarin models and generates Mermaid sequence diagrams with cryptographic annotations. |
| dashmotion 80/100 · B | csthink/dashmotion | Creates dark-themed animated technical diagrams as self-contained HTML and SVG files, including flowcharts with flowing connectors and architecture diagrams with traveling light dots. |
| diagramming-code 89/100 · B | trailofbits/skills | Generates Mermaid diagrams from Trailmark code graphs, including call graphs, class hierarchies, module dependency maps, complexity heatmaps, and attack surface data flow visualizations. |
| flowchart-creator 75/100 · C | mhattingpete/claude-skills-marketplace | Creates HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. |
| hand-drawn-diagrams 79/100 · C | muthuishere/hand-drawn-diagrams | Creates hand-drawn Excalidraw diagrams, flows, explainers, wireframes, and page mockups, defaulting to monochrome sketch output. |
| diagram 74/100 · C | garrytan/gstack | Turn an English description (or mermaid source) into a diagram triplet: the source, an editable .excalidraw file you can open on excalidraw.com, and… |
| draw-io-diagram-generator 82/100 · B | github/awesome-copilot | Use when creating, editing, or generating draw.io diagram files (.drawio, .drawio.svg, .drawio.png). Covers mxGraph XML authoring, shape libraries… |
| drawio 64/100 · D | github/awesome-copilot | Generate draw.io diagrams as .drawio files and export to PNG/SVG/PDF with embedded XML |
| efcore-d2-db-diagram 84/100 · B | github/awesome-copilot | Generate D2 database diagrams from Entity Framework Core models. USE FOR: EF Core database diagram, Entity Framework Core ERD, DbContext diagram, C#… |
| excalidraw-diagram-generator 74/100 · C | github/awesome-copilot | Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process"… |
| infographics 89/100 · B | K-Dense-AI/claude-scientific-skills | Creates and reviews infographics with Nano Banana 2 via OpenRouter. Use for statistical summaries, timelines, comparisons, processes, and visual… |
| legacy-circuit-mockups 80/100 · B | github/awesome-copilot | Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize… |
| markdown-mermaid-writing 87/100 · B | K-Dense-AI/claude-scientific-skills | Writes scientific Markdown documentation and Mermaid diagrams for workflows, relationships, timelines, and schemas. Provides syntax references… |
| plantuml-ascii 79/100 · C | github/awesome-copilot | Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams… |
| scientific-schematics 81/100 · B | K-Dense-AI/claude-scientific-skills | Generates scientific diagram drafts using Nano Banana 2 AI with smart iterative refinement. Uses Gemini 3.7 Flash for quality review. Refines when… |
| user-flow-diagram 59/100 · D | infrasity-labs/dev-gtm-claude-skills | Create user flow diagrams showing paths, decisions, and branch logic. |
| utility-mermaid-diagrams 75/100 · C | product-on-purpose/pm-skills | Teaches PMs to create syntactically valid mermaid diagrams by selecting the right diagram type for their communication need, following syntax… |
How to choose diagram and infographic skills
Choose by output format. Mermaid and PlantUML skills write text that renders in docs; draw.io and Excalidraw skills write editable files; HTML diagram skills produce standalone pages.
Code-aware skills such as Trail of Bits diagramming read your repository and draw call graphs or protocol flows from it.
Infographic and scientific schematic skills call Nano Banana through OpenRouter, so they need a key.
Related topics
Find your next useful skill
Explore Rising Skills with quality scores and source reports, or search from inside your agent.
Get Rising Skills by email · Read Rising Skills · Install the finder · State of Agent Skills