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 drawioLinux： 下载自 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预提交钩子
此项目包括以下预提交挂钩：
- XML验证：检查字体设置和结构
- PNG转换：提交时自动生成PNG
- 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贡献
- 分叉存储库
- 创建要素分支
- 进行更改
- 运行测试：
pytest tests/ -v - 提交拉取请求
许可证
MIT许可证-请参阅 许可证
相关资源
更新日志
v1.0.0（2025-12-16）
- 初始版本
- 字体、箭头和文本处理的核心技能
- 用于验证的预提交挂钩
- 全面的文档和示例