skills.rest
aws-samples
aws-samplesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

diagram

Generate Mermaid syntax for flowcharts, sequence, ER, and class diagrams.

36|18|Updated Nov 23, 2025
Search Tags:#mermaid#flowchart#diagramming#workflow visualization#system architecture#sequence diagram#ER diagram
One-click install
npx skills add https://github.com/aws-samples/sample-aws-idp-pipeline --skill diagram-aws-samples
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: diagram
Source: https://github.com/aws-samples/sample-aws-idp-pipeline/tree/main/packages/agents/idp-agent/.skills/diagram
Command: npx skills add https://github.com/aws-samples/sample-aws-idp-pipeline --skill diagram-aws-samples

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you quickly turn ideas, workflows, and system relationships into readable diagrams instead of manually sketching them or struggling to find the right diagram format.

Core Features & Use Cases

  • Mermaid diagram generation: Produces Mermaid syntax for flowcharts, sequence diagrams, ER diagrams, class diagrams, state diagrams, Gantt charts, mindmaps, and timelines.
  • User-driven visualization: Works when users ask to visualize processes, workflows, system interactions, data models, or architecture/relationships.
  • Chart type guardrails: Avoids data chart requests (bar/line/pie/scatter/heatmap), steering those to the appropriate chart skill.
  • Rendering-ready output: Returns Mermaid code directly in a mermaid fenced block so the frontend can render it.

Quick Start

Ask: Create a Mermaid sequence diagram showing how a user request flows through the API to a service and then to a database.

Frequently Asked Questions about diagram

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a Mermaid flowchart for system architecture visualization?▼

To generate a Mermaid flowchart for system architecture visualization, describe your system components and interactions. The tool outputs unrendered Mermaid syntax in a fenced code block, which your frontend can render into a visual workflow diagram.

Can I create sequence diagrams and ER diagrams for workflow process visualization?▼

Yes, you can create sequence diagrams and ER diagrams for workflow process visualization. The tool generates Mermaid syntax for system interaction flows, data model relationships, class diagrams, state transitions, and mindmaps based on your text descriptions.

What is the best way to visualize a timeline or Gantt chart using Mermaid syntax?▼

The best way to visualize a timeline or Gantt chart using Mermaid syntax is to provide your schedule or event sequence. The tool maps your process logic into diagram-specific constructs, producing rendering-ready Mermaid code for timelines and Gantt charts.

Does this Mermaid diagramming tool support bar charts and pie charts?▼

No, this Mermaid diagramming tool does not support bar charts, line charts, pie charts, scatter plots, or heatmaps. It explicitly avoids data chart use cases and focuses solely on structural and process logic diagrams like flowcharts and ER diagrams.

Related Skills

Explore More Design & Creative Skills→
hokixhokix
1

dy-mermaid

Generate Mermaid diagrams from text or source code.

Community
Intermediate
yoonhwanyoonhwan
3

termaid

Render Mermaid diagram code as styled visual output in the terminal.

Community
Intermediate
qprjack86qprjack86

mermaid

Generate Mermaid diagrams in markdown for workflows, relationships, timelines, and state transitions.

Community
Intermediate
DbxstudioDbxstudio
82

data-visualization-tool

Generates customizable bar, line, pie, scatter, area, and histogram charts from SQL queries.

Official
Intermediate