Interactive Diagram
Description
生成可交互式、可拖动的 HTML 图表（流程图、架构图、思维导图、序列图），并将其作为独立文件保存。支持 Dagre 自动布局、平移/缩放，并可导出为 PNG/SVG/JSON 格式。零依赖。Claude Code 技能。Generate interactive, draggable HTML diagrams (flowcharts, architecture, mind maps, sequence diagrams) as standalone files. Supports Dagre auto-layout, pan/zoom, export PNG/SVG/JSON. Zero dependencies. Claude Code skill.
Installation
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open the source below and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
README
Interactive Diagram
Generate interactive diagrams with real-time incremental rendering via SSE — nodes appear one by one as the agent generates them.
Features • Diagram Types • Installation • Usage • Architecture • Export • Contributing
Features
- Real-Time Incremental Rendering — Nodes and edges appear one by one via SSE as the agent generates them
- AntV X6 Engine — Professional diagram editor powered by X6 v2 with Dagre auto-layout
- Interactive Editing — Drag nodes, double-click to edit labels, right-click context menu, connect ports
- Multi-Session — Multiple diagrams in parallel via
?s=session_nameURL parameter - Page Refresh Recovery — Server stores all commands; refreshing replays full state
- Server-Side Export — Export PNG, SVG, JSON, Draw.io files to disk via curl commands
- Browser Export — PNG, SVG, JSON, Draw.io XML download or copy to clipboard from toolbar
- Smooth Zoom — Mouse wheel / trackpad zoom centered on cursor
- Undo/Redo — Full history support with Ctrl/Cmd+Z
- Zero Python Dependencies — Server uses only Python stdlib
Supported Diagram Types
| Type | Description | Use Case |
|---|---|---|
| Flowchart 流程图 | Process flows with decisions, start/end nodes | Business logic, l |
Related Skills
Awesome Go
A curated list of awesome Go frameworks, libraries and software
next.js
| The React Framework | 138360 | 1503 | 1 |
sharing-skills
skill for guidance.
root-cause-tracing
Use when errors occur deep in execution and you need to trace back to find the original trigger.
Template Skill
Minimal skeleton for a new skill project structure.
Third-party Notices
THE FOLLOWING SETS FORTH ATTRIBUTION NOTICES FOR THIRD PARTY SOFTWARE THAT MAY BE CONTAINED IN PORTIONS OF THI