Repolode
提交项目
Aryanutkarsh

Aryanutkarsh/SeeCode

一个供编码智能体使用的技能，可将简短的 JSON 描述生成可动画、可交互的图表，并导出为多种格式。

可替代:LucidchartMiro

在 GitHub 查看
Star
656
Fork
35
未关闭 Issue
0
最近提交
昨天

这是什么？

SeeCode 是一个面向 Claude Code 等编码智能体的技能。开发者用自然语言描述想展示的系统或流程，智能体据此写出一份简短的 JSON 描述，SeeCode 将其渲染为一个独立的 HTML 图表文件。查看器支持悬停追踪连线、点击聚焦显示详情面板、播放两个节点之间的路径，以及按图层筛选和逐步演示。

项目提供约 45 种图表类型，涵盖架构图、时序图、流程图、ER 图、状态图、甘特图、看板、UML 类图、桑基图以及多种等距三维图。图表类数据可直接读取 CSV 或 JSON 文件。已有的 Mermaid、Graphviz、PlantUML、D2、draw.io、Excalidraw、BPMN、SQL、Prisma、DBML 和 OpenAPI 文件也可以按 SeeCode 的风格重绘。品牌配色和字体可从网站或设计令牌中学习，并内置亮色与暗色主题。

导出格式包括 SVG、PNG、JPEG、GIF 和 MP4。浏览器中的导出菜单无需安装任何工具；命令行工具需要 Node 20 或更高版本，位图和视频导出则借助本机已有的 Chrome 或 Edge。

核心功能

  • 01根据简短的 JSON 描述生成带动画的交互式 HTML 图表
  • 02支持约 45 种图表类型，包括架构图、时序图以及等距三维图
  • 03可导入 Mermaid、Graphviz、PlantUML、D2、draw.io、Excalidraw 等格式并重绘
  • 04可从网站或设计令牌学习品牌配色与字体，内置亮色和暗色主题
  • 05支持导出 SVG、PNG、JPEG、GIF 和 MP4

适用场景

  • 在与编码智能体协作时，向团队解释服务架构或请求链路
  • 将已有的 Mermaid 或 draw.io 图表重绘成更精致的版本，用于演示文稿或设计文档
  • 按统一品牌风格制作用于幻灯片、Confluence 或 README 的图表
  • 基于 CSV 数据生成图表，无需把原始数据交给模型处理

标签

#diagrams#agent-skills#claude-code#architecture-diagram#data-visualization#svg#mermaid#ai-agents#claude-skills#codex

常见问题

SeeCode 是什么？
一个供编码智能体使用的技能，可将简短的 JSON 描述生成可动画、可交互的图表，并导出为多种格式。 SeeCode 是一个面向 Claude Code 等编码智能体的技能。开发者用自然语言描述想展示的系统或流程，智能体据此写出一份简短的 JSON 描述，SeeCode 将其渲染为一个独立的 HTML 图表文件。查看器支持悬停追踪连线、点击聚焦显示详情面板、播放两个节点之间的路径，以及按图层筛选和逐步演示。
SeeCode 可以免费使用吗？用的什么许可证？
SeeCode 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
SeeCode 还在维护吗？
活跃维护中。SeeCode 最近一次提交是在 2026年10月17日。
SeeCode 适合用来做什么？
在与编码智能体协作时，向团队解释服务架构或请求链路 将已有的 Mermaid 或 draw.io 图表重绘成更精致的版本，用于演示文稿或设计文档 按统一品牌风格制作用于幻灯片、Confluence 或 README 的图表 基于 CSV 数据生成图表，无需把原始数据交给模型处理
在哪里获取 SeeCode？
源代码和安装说明在 GitHub 上：https://github.com/Aryanutkarsh/SeeCode

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目