MCP CheckClaude skills for diagrams
50 of 328 public skills on GitHub that mention diagrams: skills named for it first, then by stars, at most 3 from one repository. Each links to its folder; copy it into ~/.claude/skills/ to use it.
diagram design
Create branded architecture, architecture delta, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack,…
cathrynlavery/diagram-design★ 63kMITFolder:
diagram-designmarkdown mermaid writing
Writes scientific Markdown documentation and Mermaid diagrams for workflows, relationships, timelines, and schemas. Provides syntax references, document templates, accessibility guidance, and version-aware rendering checks. Use when a user requests…
K-Dense-AI/scientific-agent-skills★ 55kMITFolder:
markdown-mermaid-writingbaoyu diagram
Create professional, dark-themed SVG diagrams of any type — architecture diagrams, flowcharts, sequence diagrams, structural diagrams, mind maps, timelines, illustrative/conceptual diagrams, and more. Use this skill whenever the user asks for any kind of…
JimLiu/baoyu-skills★ 27kMITFolder:
baoyu-diagrammermaid diagram
Generate Mermaid diagrams from user requirements. Supports flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, and 18 more diagram types.
wanshuiyin/Auto-claude-code-research-in-sleep★ 18kMITFolder:
mermaid-diagramdiagramming code
Generates Mermaid diagrams from Trailmark code graphs. Produces call graphs, class hierarchies, module dependency maps, containment diagrams, complexity heatmaps, and attack surface data flow visualizations. Use when visualizing code architecture, drawing…
trailofbits/skills★ 7.9kCC-BY-SA-4.0Folder:
diagramming-codecrypto protocol diagram
Extracts protocol message flow from source code, RFCs, academic papers, pseudocode, informal prose, ProVerif (.pv), or Tamarin (.spthy) models and generates Mermaid sequenceDiagrams with cryptographic annotations. Use when diagramming a crypto protocol,…
trailofbits/skills★ 7.9kCC-BY-SA-4.0Folder:
crypto-protocol-diagrammermaid to proverif
Translates Mermaid sequenceDiagrams describing cryptographic protocols into ProVerif formal verification models (.pv files). Use when generating a ProVerif model, formally verifying a protocol, converting a Mermaid diagram to ProVerif, verifying protocol…
trailofbits/skills★ 7.9kCC-BY-SA-4.0Folder:
mermaid-to-proveriffigma generate diagram
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram —…
Devin-AXIS/iPolloWork★ 7.3kLicence: see repoFolder:
figma-generate-diagramstage diagrams
Use the 35 installed native business diagram components in the active iPolloWork video project. Edit their native text, graphics, shared data forms and seekable GSAP timelines with the standard Video Studio workflow.
Devin-AXIS/iPolloWork★ 7.3kLicence: see repoFolder:
skillcode to diagram
Analyze codebases and automatically generate architecture diagrams, flowcharts, and org charts. Uses AST parsing to map import dependencies for Python, JS/TS, Go, and Java, outputting Mermaid or SVG files. Triggered when users ask to visualize code…
zebbern/claude-code-guide★ 4.7kMITFolder:
code-to-diagramhtml diagram
Direct-invocation specialist for self-contained HTML diagrams whose layout, notation, and interaction clarify relationships, sequence, topology, state, hierarchy, or quantitative structure. Use when the user explicitly invokes html-diagram or the broad…
plannotator/effective-html★ 3.8kMITFolder:
html-diagrammermaid diagrams
Comprehensive guide for creating software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams (domain modeling, object-oriented design), sequence diagrams (application…
softaworks/agent-toolkit★ 2.6kMITFolder:
mermaid-diagramsnew diagram
Scaffold a new TikZ diagram from the snippet gallery with prevention rules pre-applied (explicit node dimensions, coordinate map, directional edge labels). Compiles standalone, invokes tikz-reviewer with citations from tikz-measurement.md, and loops on…
pedrohcgs/claude-code-my-workflow★ 1.7kMITFolder:
new-diagrampretty mermaid
Generate and render Mermaid diagrams for architecture docs, READMEs, PRs, terminals, chats, and CI as themed SVG, PNG, or ASCII/Unicode art. Use this skill whenever the user provides Mermaid code or .mmd files; asks for a flowchart, sequence/state/class…
imxv/Pretty-mermaid-skills★ 1.6kMITFolder:
Pretty-mermaid-skillsaws architecture diagram
Generate validated AWS architecture diagrams as draw.io XML using official AWS4 icon libraries. Use this skill whenever the user wants to create, generate, or design AWS architecture diagrams, cloud infrastructure diagrams, or system design visuals. Also…
awslabs/agent-plugins★ 932Apache-2.0Folder:
aws-architecture-diagramlegal diagram
Use when a user needs a legal or legal-adjacent Mermaid diagram from a document, pasted text, matter description, process, timeline, party map, obligation map, corporate structure, funds flow, or compliance workflow. Trigger on: "diagram this contract",…
lawve-ai/awesome-legal-skills★ 911Licence: see repoFolder:
legal-diagram-sam-zhaicoco diagram
Use for architecture, current-state, process, data-flow, medallion, or DP diagrams, including redrawing .drawio and Mermaid sources. Creates branded flowchart, sequence, ER, org, timeline, and chart visuals as standalone HTML/SVG/PNG.
coco-research/coco★ 795Licence: see repoFolder:
coco-diagramutility mermaid diagrams
Teaches PMs to create syntactically valid mermaid diagrams by selecting the right diagram type for their communication need, following syntax validity rules, and validating before shipping. Covers all 15 mermaid diagram types with PM-relevant examples and…
product-on-purpose/pm-skills★ 770Apache-2.0Folder:
utility-mermaid-diagramsarchitecture diagram creator
Create comprehensive HTML architecture diagrams showing data flows, business objectives, features, technical architecture, and deployment. Use when users request system architecture, project documentation, high-level overviews, or technical specifications.
mhattingpete/claude-skills-marketplace★ 689Apache-2.0Folder:
architecture-diagram-creatorflowchart creator
Create HTML flowcharts and process diagrams with decision trees, color-coded stages, arrows, and swimlanes. Use when users request flowcharts, process diagrams, workflow visualizations, or decision trees.
mhattingpete/claude-skills-marketplace★ 689Apache-2.0Folder:
flowchart-creatorsvg diagram
SVG diagramming conventions blending a technical look with CJK-friendly typography. Use when creating flowcharts, architecture diagrams, and similar SVG figures. For one-shot generation, prefer invoking it from a subagent so the main context does not have…
bybit-exchange/svg-diagram★ 632MITFolder:
svg-diagramnw diagram
Generates C4 architecture diagrams (context, container, component) in Mermaid or PlantUML. Use when creating or updating architecture visualizations.
nWave-ai/nWave★ 626MITFolder:
nw-diagramln 25 architecture diagram builder
Creates evidence-backed current or target architecture diagrams; not UI design.
levnikolaevich/claude-code-skills★ 584MITFolder:
ln-25-architecture-diagram-builder033 architecture diagrams
Use when you need to generate Java project diagrams — including UML sequence diagrams, UML class diagrams, C4 model diagrams, UML state machine diagrams, UML Deployment Diagrams, ER (Entity Relationship) diagrams, and bounded-context diagrams — through a…
jabrena/plinth★ 456Apache-2.0Folder:
033-architecture-diagramsaws drawio architecture diagrams
Creates professional AWS architecture diagrams in draw.io XML format (.drawio files) using official AWS Architecture Icons (aws4 library). Use when the user asks for AWS diagrams, VPC layouts, multi-tier architectures, serverless designs, network topology,…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
aws-drawio-architecture-diagramsdrawio logical diagrams
Creates professional logical flow diagrams and logical system architecture diagrams using draw.io XML format (.drawio files). Use when creating: (1) logical flow diagrams showing data/process flow between system components, (2) logical architecture…
giuseppe-trisciuoglio/developer-kit★ 366MITFolder:
drawio-logical-diagramsarchitecture diagram
Generates a Mermaid architecture diagram showing high-level component relationships. Use when visualizing how plugins or modules fit together.
athola/claude-night-market★ 343MITFolder:
architecture-diagramclass diagram
Generates a Mermaid class diagram showing types, inheritance, and composition. Use when visualizing class hierarchies or documenting a module public API.
athola/claude-night-market★ 343MITFolder:
class-diagramworkflow diagram
Generates a Mermaid workflow diagram showing process steps, decisions, and state transitions. Use when documenting CI/CD pipelines or lifecycle processes.
athola/claude-night-market★ 343MITFolder:
workflow-diagramrebuild package diagrams
Render a reverse-spec rebuild package as traced, script-checked visuals — a Mermaid ER diagram of model.md entities, capability use cases as BPMN processes, and one browsable HTML catalog. Use on "ER diagram from the entities", "draw the data model", "use…
BlackBeltTechnology/pi-agent-dashboard★ 337MITFolder:
rebuild-package-diagramsconcept diagrams
Minimal SVG diagrams as standalone HTML files.
HezaoHezao/poirot★ 257MITFolder:
concept-diagramsexcalidraw diagram generator
Create, implement, or review excalidraw diagram generator work with format, accessibility, performance, and visual-verification controls. Use when the requested deliverable depends on excalidraw diagram generator.
sandbaseai/sandbase-skills★ 203Apache-2.0Folder:
excalidraw-diagram-generatorip diagram creator
个人 IP 图解创作器。用你的 IP 形象，生成专属内容图解。用于把用户授权提供的照片、主页截图、简介、账号资料或角色档案转成稳定的极简手绘图解角色，并继续生成长文配图、图文号知识卡、手机海报、方法拆解图、分镜故事图、IP 演讲 PPT、直播分享课件和全图化手绘 PPT 页面等内容视觉。它强调 IP 主角 + 执行 Agent 的知识图解系统：用户 IP 做主讲、拆解、批注和调度，执行 Agent 做搬卡片、反馈、试错、标记风险和递交结果。用户想做个人 IP…
skillmds/skillmd★ 191MITFolder:
ip-diagram-creatordiagram
Generate Mermaid architecture diagrams from your codebase. Produces C4 context and container diagrams, sequence diagrams for key flows, ER diagrams from database schemas, and module dependency graphs. Use when you need architecture diagrams, system…
skillmds/skillmd★ 191MITFolder:
diagramlit diagram drawer
Draw an architecture, workflow, data-model or timeline diagram as editable SVG, check it, and export PNG. Use when a picture explains faster than prose.
wjgoarxiv/litgravity★ 166MITFolder:
lit-diagram-drawerc4 diagramming
Create and review C4 software-architecture diagrams using Mermaid or Structurizr. Use when teams need a communication-ready system context, container, component, or code-level view, including audience, narrative, hierarchy, labels, legends, accessibility,…
magnus919/agent-skills★ 156MITFolder:
c4-diagrammingaffinity diagram
Organize qualitative research data into an affinity diagram with themes, clusters, and insight statements. Use when synthesizing large amounts of qualitative data from interviews, observations, or surveys.
Infrasity-Labs/dev-gtm-claude-skills★ 150MITFolder:
affinity-diagramxs diagram generator
内容に応じて最適な図表形式を自動選択し、ローカルで画像生成（Pillow）またはコード出力（Mermaid/PlantUML）。フローチャート、アーキテクチャ図、階層図などを生成。資料作成、システム設計時に使用。
karaage0703/ai-assistant-workspace★ 137MITFolder:
xs-diagram-generatorauthoring motion diagrams
Use when adding a plugin to the marketplace, or when authoring, editing, or re-rendering a scene under scripts/animations/scenes/ — including when a scene fails the render contract, the contrast gate, or the grid baseline.
2389-research/claude-plugins★ 98MITFolder:
authoring-motion-diagramsexcalidraw diagram
Create Excalidraw diagram JSON files that make visual arguments. Use when the user wants to visualize workflows, architectures, agent systems, client deliverables, or any concept as a diagram. Triggers on phrases like "draw a diagram", "make an…
walidboulanouar/Ay-Skills★ 92MITFolder:
excalidraw-diagrammermaid render
Рендерит mermaid-диаграммы в PNG/SVG/PDF через локальный mermaid-cli (mmdc). Используй когда пользователь просит отрендерить mermaid, сделать PNG из диаграммы, превратить mermaid в картинку, конвертировать .mmd в png/svg/pdf, извлечь mermaid из markdown в…
Desko77/claude-code-skills-1c★ 87MITFolder:
mermaid-rendermermaid diagramming
Mermaid diagram creation covering flowcharts, sequence diagrams, ERDs, state machines, Gantt charts, and architecture views. Use when creating or updating technical diagrams in documentation.
NickCrew/Claude-Cortex★ 62MITFolder:
mermaid-diagrammingmermaid
Load this skill whenever the project uses Mermaid diagrams — flowcharts, sequence diagrams, class diagrams, Gantt charts, or any Mermaid-rendered visualization. Under no circumstances render a Mermaid diagram without an accessible title, description, and…
mgifford/accessibility-skills★ 57AGPL-3.0Folder:
mermaiddiagram design zh
生成、重绘或修改中文图表，默认输出带内联 SVG 和内嵌字体的独立 HTML；可导出 PNG/SVG。用于架构、流程、数据比较、计划、关系与空间示意图，以及 Mermaid/draw.io 重绘；支持品牌样式、字体更换和可选动效。不用于一般网页或应用界面开发。
patrick-xin/diagram-design-zh★ 48MITFolder:
diagram-design-zhtechnical diagrams
Provides Mermaid diagram syntax, best practices, and styling rules for technical visualizations. Use when creating diagrams, flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, architecture diagrams, C4 diagrams, visualizations, or…
sequenzia/agent-alchemy★ 45MITFolder:
technical-diagramsbeautiful mermaid
Render Mermaid diagrams as ASCII/Unicode art for terminal display or as SVG files. Use when visualizing flowcharts, state machines, sequence diagrams, class diagrams, or ER diagrams. Supports 17 themes (including vellum, tokyo-night, catppuccin, nord,…
tdimino/claude-code-minoan★ 41MITFolder:
beautiful-mermaiddiagrams
Use when creating technical diagrams as code. Covers Mermaid for architecture, sequence, and flow diagrams, choosing the right diagram type, and keeping diagrams accurate as the system changes. Trigger on "draw an architecture diagram", "make a mermaid…
nimadorostkar/Claude-Skills-collection★ 33MITFolder:
diagramsanimated sketch diagram
生成"黑墨手绘涂鸦"风格的动画架构图/流程图：米色纸面、针管笔墨线、极淡水洗色块、简笔涂鸦图标、序号章、连线上的流动圆点动画、图标微动效。产出单文件自包含动画 HTML（SVG+CSS），可一键导出无缝循环 GIF。当用户想画架构图、流程图、信息图、技术示意图、对比图、pipeline/workflow 可视化，或提到"手绘风""涂鸦风""动图""animated diagram""GIF 架构图"时使用；即使用户没明说要动画，做技术概念科普配图时也应优先考虑本 skill。
OLDyade/animated-sketch-diagram★ 31Licence: see repoFolder:
animated-sketch-diagramdiagramming
Technical diagram creation with visual design principles: format selection, layout, readability, and aesthetics. Invoke whenever task involves any interaction with diagrams — creating, reviewing, or improving visual representations of systems, processes,…
xobotyi/cc-foundry★ 23MITFolder:
diagramminginteractive flowchart builder
Build interactive "living workflow" flowcharts in the visual style of https://statuesque-starship-49757d.netlify.app/revenue-engine - vanilla HTML/CSS/JS files with a horizontal step bar, a vertical trunk that grows per step, tool-to-tool columns with…
qa-aman/claude-skills★ 23MITFolder:
interactive-flowchart-builder
Claude skills for diagrams: common questions
Is there a Claude skill for diagrams?
There are 328 of them, spread over 208 repositories on GitHub. Named for it and most starred: diagram design (cathrynlavery/diagram-design, ★ 63k), markdown mermaid writing (K-Dense-AI/scientific-agent-skills, ★ 55k) and baoyu diagram (JimLiu/baoyu-skills, ★ 27k). Stars rate the repository a skill sits in, not the skill.
How do I install a Claude skill for diagrams?
For diagrams, take the diagram-design folder from cathrynlavery/diagram-design (the folder that holds SKILL.md) into ~/.claude/skills/ to use it in every Claude Code project, or into .claude/skills/ for one project. In the Claude apps, zip that folder and upload it as a custom skill in settings.
What should I check before installing a diagrams skill?
A diagrams skill is instructions Claude follows, and it can bundle scripts Claude runs, so read SKILL.md and every script first: for diagram design, that is everything in the diagram-design folder. Red flags: piping a download into a shell, sending files to a URL, and instructions to hide what it does from you.
Are these diagrams skills maintained?
223 of the 328 diagrams skills sit in repositories that changed in the 30 days before 31 Oct 2026.
Are these diagrams skills official?
No. None of the 328 diagrams skills comes from Anthropic's own skills repository, so all of them are community-made across 208 repositories.
Can I use these diagrams skills at work?
Of the 50 diagrams skills listed here, 41 sit in repositories under an open licence such as MIT or Apache 2.0, and every one states a licence. Check the licence file before you copy one into company work.
More topics: every “Claude skills for…” page.