draw MCP

Claude Skill：draw.io图表生成器

Claude Code技能，用于生成具有适当字体设置、箭头位置和日语文本支持的高质量draw.io图表。

特性

• 字体管理：确保 fontFamily 设置在所有文本元素上
• 箭头分层：正确的Z顺序放置（方框后的箭头）
• 日语文本支持：CJK字符的适当宽度分配
• PNG验证：用于自动生成PNG的预提交挂钩
• 最佳实践：综合检查表和示例

安装

插件安装（推荐）

# Via Claude Code marketplace
/plugin marketplace add ekusiadadus/draw-mcp

# Or install directly
/plugin add https://github.com/ekusiadadus/draw-mcp

手动安装

克隆到您的Claude Code技能目录：

# Global (personal use)
git clone https://github.com/ekusiadadus/draw-mcp ~/.claude/skills/draw-io

# Project-specific
git clone https://github.com/ekusiadadus/draw-mcp .claude/skills/draw-io

用法

安装后，当您要求创建draw.io图表时，Claude Code将自动使用此技能。

示例提示

Create a simple flowchart showing: Start -> Process -> End

Draw an architecture diagram with Web Server, API, and Database

Create a sequence diagram for user login flow

手动触发

如果需要，您可以明确请求该技能：

Using the draw-io skill, create a flowchart for the authentication process

需求

draw.io CLI（用于PNG导出）

macOS：

brew install --cask drawio

Linux： 下载自 draw.io桌面版发布

Python（用于测试和验证）

pip install pytest

项目结构

draw-mcp/
├── .claude-plugin/
│   ├── plugin.json          # Plugin manifest
│   └── marketplace.json     # Marketplace configuration
├── skills/
│   └── draw-io/
│       ├── SKILL.md         # Main skill definition
│       ├── reference.md     # XML structure reference
│       ├── examples.md      # Production-ready examples
│       └── checklist.md     # Validation checklist
├── scripts/
│   └── convert-drawio-to-png.sh
├── tests/
│   └── test_drawio_skill.py
├── docs/
│   └── RULE.md
├── .pre-commit-config.yaml
├── .gitignore
├── LICENSE
└── README.md

关键规则

1.字体设置

2.箭头位置

箭头必须在XML中声明为FIRST，才能在其他元素后面呈现：

3.日文文本宽度

为每个日文字符分配30-40px：

4.PNG验证

始终导出为PNG并进行视觉验证：

drawio -x -f png -s 2 -t -o diagram.png diagram.drawio

预提交钩子

此项目包括以下预提交挂钩：

1. XML验证：检查字体设置和结构
2. PNG转换：提交时自动生成PNG
3. Python测试：运行技能验证测试

设置：

pip install pre-commit
pre-commit install

运行测试

# Run all tests
pytest tests/ -v

# Run specific test file
pytest tests/test_drawio_skill.py -v

贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 运行测试： pytest tests/ -v
5. 提交拉取请求

许可证

MIT许可证-请参阅 许可证

相关资源

• draw.io桌面
• Claude代码文档
• draw.io XML格式参考

更新日志

v1.0.0（2025-12-16）

• 初始版本
• 字体、箭头和文本处理的核心技能
• 用于验证的预提交挂钩
• 全面的文档和示例