⚠

High Risk:This skill has significant security concerns. Review the findings below before installing.

drawio

⚠Caution·Scanned 2/18/2026

The skill generates draw.io diagrams via a local MCP server and exposes MCP tools like start_session, create_new_diagram, edit_diagram, get_diagram, and export_diagram. It includes shell commands (npx --yes @next-ai-drawio/mcp-server@latest, npm view @next-ai-drawio/mcp-server version) and will perform network operations (http://localhost:6002?mcp=abc123, https://github.com/DayuanJiang/next-ai-draw-io).

by bahayonghang·v2.0.0·226.6 KB·311 installs

Scanned from main at fbf7571 · Transparency log ↗

$ vett add bahayonghang/drawio-skills/drawioReview security findings before installing

Draw.io Design System

A unified design system providing consistent visual language for AI-generated draw.io diagrams.

Quick Start

meta:
  theme: tech-blue    # Select theme
  layout: horizontal  # Layout direction

nodes:
  - id: api
    label: API Gateway
    type: service     # Auto-selects rounded rectangle

  - id: db
    label: User Database
    type: database    # Auto-selects cylinder

edges:
  - from: api
    to: db
    type: data        # Dashed line with arrow
    label: Query

Core Concepts

8px Grid System

All positions, sizes, and spacing are multiples of 8px for professional alignment.

Spacing	Value	Usage
Node margin	32px	Minimum space between nodes
Container padding	24px	Space inside modules
Canvas padding	32px	Edge to content

Themes

4 built-in themes for different use cases:

Theme	Use Case
Tech Blue	Software architecture, DevOps
Academic	IEEE papers, grayscale print
Nature	Environmental, lifecycle
Dark Mode	Presentations, slides

Semantic Shapes

Automatic shape selection based on node type:

Type	Shape
`service`	Rounded rectangle
`database`	Cylinder
`decision`	Diamond
`terminal`	Stadium/Pill
`queue`	Parallelogram
`user`	Ellipse

Typed Connectors

Visual hierarchy through connector semantics:

Type	Style	Usage
`primary`	Solid 2px	Main flow
`data`	Dashed 2px	Data/async
`optional`	Dotted 1px	Weak relation

Documentation

Topic	Description
tokens.md	Color, spacing, typography tokens
themes.md	Built-in themes & customization
shapes.md	Semantic shape vocabulary
connectors.md	Connector types & routing
icons.md	Cloud provider & DevOps icons
formulas.md	LaTeX/MathJax integration
specification.md	YAML specification format

Example: Microservices Architecture

meta:
  theme: tech-blue
  layout: horizontal

modules:
  - id: frontend
    label: Frontend
  - id: backend
    label: Backend
  - id: data
    label: Data Layer

nodes:
  - id: web
    label: Web App
    type: service
    module: frontend
    
  - id: api
    label: API Gateway
    type: service
    module: backend
    icon: aws.api-gateway
    
  - id: users
    label: User Service
    type: service
    module: backend
    
  - id: db
    label: PostgreSQL
    type: database
    module: data

edges:
  - from: web
    to: api
    type: primary
    
  - from: api
    to: users
    type: primary
    
  - from: users
    to: db
    type: data
    label: CRUD

Design Principles

Content in Components: Prefer embedding text and formulas in nodes (shapes) rather than standalone text boxes. Use standalone text only when no suitable shape exists. Exception: edge labels for connector annotations.

文字、公式等尽量写入形状组件中，而非独立文本框；仅当无合适形状时才使用独立文本框。例外：边标签用于箭头标注。
KISS: Simple, predictable styling
DRY: Reusable tokens and themes
Consistency: Same semantic = same visual
Accessibility: High contrast, print-safe options

Migration from A-H Format

The legacy A-H format is replaced by YAML specification. See specification.md for migration guide.

Before (A-H)	After (YAML)
Free-text sections	Structured fields
Implicit styling	Explicit themes
No validation	JSON Schema