Tags

Best Diagrams Skills for AI Agents

58 Diagrams skills for AI coding assistants — ranked by popularity.

Visualizing technical concepts is often a manual, time-consuming bottleneck. This collection of curated skills equips your AI agents to automate the creation of diagrams, flowcharts, and system architectures directly within your development environment. Whether you are generating infrastructure plans for AWS with draw.io, scripting deterministic SVG icons, or sketching system designs in Excalidraw, these tools translate your text requirements into concrete visual assets. Developers use these skills to maintain clear technical documentation and communicate complex logic without leaving the editor. You will find specialized agents for XML-based diagramming, Mermaid syntax generation, and infographic creation. This library is for engineers who need to bridge the gap between code and documentation quickly. Expect direct integration with your existing workflow, allowing your agent to produce, edit, and validate technical drawings through precise, structured output.

Top Diagrams skills

drawio-diagrams-enhanced

jgtolentino

Create professional draw.io (diagrams.net) diagrams in XML format (.drawio files) with integrated PMP/PMBOK methodologies, extensive visual asset libraries, and industry-standard professional templates. Use this skill when users ask to create flowcharts, swimlane diagrams, cross-functional flowcharts, org charts, network diagrams, UML diagrams, BPMN, project management diagrams (WBS, Gantt, PERT, RACI), risk matrices, stakeholder maps, or any other visual diagram in draw.io format. This skill includes access to custom shape libraries for icons, clipart, and professional symbols.

1,3201,999

svg-precision

dkyazzentwatwa

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

5271,229

infographic-creation

antvis

Create beautiful infographics based on the given text content. Use this when users request creating infographics.

120358

draw-io

davila7

draw.io diagram creation, editing, and review. Use for .drawio XML editing, PNG conversion, layout adjustment, and AWS icon usage.

41204

cisco-network-diagram

neuro-synapse

Generate Draw.io network topology diagrams from Cisco router and switch configurations. Use when asked to visualize network topology, create network diagrams, map network infrastructure, or generate visual representations from Cisco device configs. Supports parsing show commands, configuration files, CDP/LLDP neighbor data, and routing protocol information to automatically create professional network diagrams.

8155

mermaid-expert

sickn33

Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram types and styling. Use PROACTIVELY for visual documentation, system diagrams, or process flows.

27133

system-design

lagz0ne

Use when designing, architecting, or planning a new system from requirements or ideas - transforms concepts into navigable design catalog using EventStorming methodology, Mermaid diagrams, and progressive elaboration through 5 phases (Requirements, Big Picture, Processes, Data/Flows, Integration)

19108

openspec-explore

studyzy

进入探索模式 - 一个用于探索想法、调查问题和澄清需求的思考伙伴。当用户想要在进行更改之前或期间深入思考某事时使用。

4117

excalidraw-diagram-generator

github

Generate Excalidraw diagrams from natural language descriptions. Use when asked to "create a diagram", "make a flowchart", "visualize a process", "draw a system architecture", "create a mind map", or "generate an Excalidraw file". Supports flowcharts, relationship diagrams, mind maps, and system architecture diagrams. Outputs .excalidraw JSON files that can be opened directly in Excalidraw.

1879

mermaid-diagram-specialist

davila7

Mermaid diagram specialist for creating flowcharts, sequence diagrams, ERDs, and architecture visualizations

1277

c4-architecture

davila7

Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, document system architecture, visualize software structure, create C4 diagrams, or generate context/container/component/deployment diagrams. Triggers include "architecture diagram", "C4 diagram", "system context", "container diagram", "component diagram", "deployment diagram", "document architecture", "visualize architecture".

1070

obsidian-canvas-creator

axtonliu

Create Obsidian Canvas files from text content, supporting both MindMap and freeform layouts. Use this skill when users want to visualize content as an interactive canvas, create mind maps, or organize information spatially in Obsidian format.

1857

scientific-slides

davila7

Build slide decks and presentations for research talks. Use this for making PowerPoint slides, conference presentations, seminar talks, research presentations, thesis defense slides, or any scientific talk. Provides slide structure, design templates, timing guidance, and visual validation. Works with PowerPoint and LaTeX Beamer.

1855

scientific-schematics

davila7

Create publication-quality scientific diagrams using Nano Banana Pro AI with smart iterative refinement. Uses Gemini 3 Pro for quality review. Only regenerates if quality is below threshold for your document type. Specialized in neural network architectures, system diagrams, flowcharts, biological pathways, and complex scientific visualizations.

760

baoyu-slide-deck

JimLiu

Generates professional slide deck images from content. Creates outlines with style instructions, then generates individual slide images. Use when user asks to "create slides", "make a presentation", "generate deck", "slide deck", or "PPT".

850

legacy-circuit-mockups

github

Generate breadboard circuit mockups and visual diagrams using HTML5 Canvas drawing techniques. Use when asked to create circuit layouts, visualize electronic component placements, draw breadboard diagrams, mockup 6502 builds, generate retro computer schematics, or design vintage electronics projects. Supports 555 timers, W65C02S microprocessors, 28C256 EEPROMs, W65C22 VIA chips, 7400-series logic gates, LEDs, resistors, capacitors, switches, buttons, crystals, and wires.

747

json-canvas

davila7

Create and edit JSON Canvas files (.canvas) with nodes, edges, groups, and connections. Use when working with .canvas files, creating visual canvases, mind maps, flowcharts, or when the user mentions Canvas files in Obsidian.

542

mermaid-diagrams

davila7

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 flows, API interactions, code execution), flowcharts (processes, algorithms, user journeys), entity relationship diagrams (database schemas), C4 architecture diagrams (system context, containers, components), state diagrams, git graphs, pie charts, gantt charts, or any other diagram type. Triggers include requests to "diagram", "visualize", "model", "map out", "show the flow", or when explaining system architecture, database design, code structure, or user/application flows.

827

wiki-page-writer

microsoft

Generates rich technical documentation pages with dark-mode Mermaid diagrams, source code citations, and first-principles depth. Use when writing documentation, generating wiki pages, creating technical deep-dives, or documenting specific components or systems.

530

plantuml-ascii

github

Generate ASCII art diagrams using PlantUML text mode. Use when user asks to create ASCII diagrams, text-based diagrams, terminal-friendly diagrams, or mentions plantuml ascii, text diagram, ascii art diagram. Supports: Converting PlantUML diagrams to ASCII art, Creating sequence diagrams, class diagrams, flowcharts in ASCII format, Generating Unicode-enhanced ASCII art with -utxt flag

826

excalidraw-diagram

axtonliu

Generate Excalidraw diagrams from text content. Supports three output modes - Obsidian (.md), Standard (.excalidraw), and Animated (.excalidraw with animation order). Triggers on "Excalidraw", "画图", "流程图", "思维导图", "可视化", "diagram", "标准Excalidraw", "standard excalidraw", "Excalidraw动画", "动画图", "animate".

1221

architecture-diagram-creator

mhattingpete

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.

824

mermaidjs-v11

mrgoonie

Create diagrams and visualizations using Mermaid.js v11 syntax. Use when generating flowcharts, sequence diagrams, class diagrams, state diagrams, ER diagrams, Gantt charts, user journeys, timelines, architecture diagrams, or any of 24+ diagram types. Supports JavaScript API integration, CLI rendering to SVG/PNG/PDF, theming, configuration, and accessibility features. Essential for documentation, technical diagrams, project planning, system architecture, and visual communication.

421

manim-composer

adithya-s-k

Trigger when: (1) User wants to create an educational/explainer video, (2) User has a vague concept they want visualized, (3) User mentions "3b1b style" or "explain like 3Blue1Brown", (4) User wants to plan a Manim video or animation sequence, (5) User asks to "compose" or "plan" a math/science visualization. Transforms vague video ideas into detailed scene-by-scene plans (scenes.md). Conducts research, asks clarifying questions about audience/scope/focus, and outputs comprehensive scene specifications ready for implementation with ManimCE or ManimGL. Use this BEFORE writing any Manim code. This skill plans the video; use manimce-best-practices or manimgl-best-practices for implementation.

816

How to choose a Diagrams skill

Select a skill based on your specific output format and use case. If you need standard diagrams.net files, choose drawio or draw-io. For hand-drawn aesthetics and rapid prototyping, excalidraw or excalidraw-architect are better suited. Use mermaid-gen if your focus is plain-text technical documentation that scales well in Markdown. Consider the level of precision required; svg-precision is ideal for UI mockups or icons where structure is critical. Check the creator's maintenance frequency and whether the skill supports the specific file extensions or design methodologies you already use in your codebase.

More Diagrams skills

Frequently asked

Should I use Mermaid or draw.io for my project?
Use Mermaid if you prioritize version control and plain-text readability, as it stores diagrams as simple syntax within your code files. Choose draw.io or Excalidraw if you need specific visual styling, custom icons like AWS sets, or a drag-and-drop aesthetic that you can later edit in a visual interface.
Can these agents edit existing diagrams?
Yes, several skills in this collection support modification of existing files. For instance, the draw-io skill handles XML editing and layout adjustments for existing .drawio files. Always verify if the specific skill mentions support for editing or format conversion before installation, as some are optimized primarily for generating new content from scratch.

Browse other tags

Search skills

Search the agent skills registry