Interactive Diagram — Development skill for Claude Code
生成可交互式、可拖动的 HTML 图表（流程图、架构图、思维导图、序列图），并将其作为独立文件保存.
How to install Interactive Diagram
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open Program120/interactive-diagram and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Interactive Diagram does
生成可交互式、可拖动的 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.
Alternatives in Development
- Htb Writeups — The most comprehensive Hack The Box writeup collection - 500+ machines, 400+ challenges, interactive knowledge 244 ★
- Paper Glance Skill — 📄 A Claude skill for comprehensive academic paper analysis — deep reports, mind maps, peer review, and promo 103 ★
- Anatomy — A Claude Code skill that turns a technical idea into a detailed, interactive isometric figure of a real machin 96 ★
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
Multi Chart Draw Skills
支持多种图表类型的绘制工具，包括思维导图、流程图、数据可视化图表、数学函数图等；可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表，并导出为 PNG、SVG、
Tldraw Diagram Skill
Claude Code skill for generating tldraw diagrams (.tldr files & SDK code) with a headless PNG/SVG renderer. Un
TS Tsx JS Jsx Architecture Diagrams
Claude Code skill that generates architecture diagrams ( class, component, and dependency graphs) for any Type
Archpresent
Agent skill: generate beautiful dark-themed architecture diagrams from your project/demo/idea. Interactive, ve
ChatGPT Skill Plugins
Artifact-only ChatGPT skills/plugins for Mermaid diagrams, portable Modelica projects, and portable mind maps
Browser Render
Render HTML/SVG to a PNG/PDF image without flashing the screen.
Related Agents
Mermaid Expert
Create Mermaid diagrams for flowcharts, sequences, ERDs, and architectures. Masters syntax for all diagram typ
Asset Creator
Creates code-based visual assets — SVG icons, OG image HTML, social banners, icon sets. Code-only output (not
Figure Engineer
Produces every code-rendered figure: diagrams (Mermaid, D2, Graphviz), charts from data (matplotlib, Vega-Lite
