Arc

Name: Arc
Author: hudsonkit

本地服务

hudsonkit.com开发工具15今天更新

代码仓库访问官网

关于 Arc

Arc 是用于以代码编写架构图的 MCP 服务，供 AI Agent 创建、校验、布局、渲染和比较图表。它提供多种导出形式、主题及图表相关资源，并可通过 stdio 或自行运行的 HTTP 服务接入。

主要功能

01校验图表并提供诊断
02自动布局图表
03渲染 SVG、PNG 与动画
04导出 HTML、ASCII 和 TypeScript
05生成结构化图表差异

适用场景

01从代码数据生成架构图
02检查图表并应用支持的修复
03将图表导出到文档或终端
04比较两版图表结构

MCP 相关

Arc 通过 MCP 向客户端提供图表校验、布局、渲染、差异比较等工具，以及图表 Schema、技能和文档资源。发布版本通过 stdio 运行，也可从仓库启动 Streamable HTTP 服务。

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "hudsonkit-arc": {
      "command": "npx",
      "args": [
        "-y",
        "@hudsonkit/arc-mcp"
      ]
    }
  }
}

启动命令npx -y @hudsonkit/arc-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npm@hudsonkit/arc-mcp0.14.1stdio

工具

收录的工具列表 · 更新于 3 天前

参数	类型	必填	说明
diagram	object	是	Arc 图 JSON 对象或 JSON 字符串
severity	enum	否	按严重性筛选返回的诊断信息（默认：全部）error \| warning \| all

详细介绍

@hudsonkit/arc-mcp

用于以代码方式绘制架构图的 MCP 服务。

通过 Model Context Protocol，为 AI Agent 提供完整的 Arc 工具链 — 可从任何 MCP 客户端编写、验证、布局、渲染和比较架构图。

运行

无需安装 — 服务通过 stdio 运行：

npx -y @hudsonkit/arc-mcp
# or: bunx @hudsonkit/arc-mcp

客户端配置

需要 Node.js 22 或更高版本。无需账户、API 密钥或环境配置。导出 PNG 需要本地安装 Chrome/Chromium；导出动画还需要 ffmpeg。

Claude Code：

claude mcp add --scope project arc -- npx -y @hudsonkit/arc-mcp

Devin：

devin mcp add arc -- npx -y @hudsonkit/arc-mcp

任何 MCP 客户端（JSON 配置）：

{
  "mcpServers": {
    "arc": {
      "command": "npx",
      "args": ["-y", "@hudsonkit/arc-mcp"]
    }
  }
}

工具

工具	功能
`validate_diagram`	对 `ArcDiagramData` 进行带代码的诊断 — 按 `code` 处理，应用 `supportedFixes` 条目，然后重新验证
`auto_layout`	对完整图表或最简输入（`nodeData` + `connectors` + `connectorStyles`）自动布局
`diff_diagram`	生成结构化的 `DiagramDelta` — 将其传给 `<ArcDiagram data={head} delta={delta} />` 以渲染差异
`render_svg`	确定性 SVG 导出 — 提供 11 种主题，支持浅色/深色；已编写的流程可通过 SMIL 动画，或在 `flowTime` 时采样
`render_png`	通过本地 Chrome/Chromium 二进制文件栅格化为 PNG（可用 `ARC_CHROME` 覆盖，使用 `ARC_CHROME=none` 禁用），在 `flowTime` 时采样
`render_animation`	通过 Chrome 帧和 ffmpeg 将流程动画导出为 GIF/MP4，并保存到 `output` 路径（可用 `ARC_FFMPEG` 覆盖）
`render_html`	生成 React 组件片段、iframe 嵌入代码或独立 HTML 页面
`render_ascii`	为终端和文档生成 Unicode/ASCII 箱线图
`diagram_to_typescript`	输出包含类型定义的 `ArcDiagramData` TypeScript 模块
`editor_handoff`	构建可在 Arc 工作室中打开图表的 URL

资源

URI	内容
`arc://schema/diagram`	为 `ArcDiagramData` 生成的 draft-07 JSON Schema
`arc://skill/diagrams`	面向 Agent 的 Arc 图表生成技能
`arc://docs/llm`	精简的大模型简介

通过 HTTP 自托管

已发布的二进制文件通过 stdio 运行，这满足本地客户端的全部需求。若要向其他机器上的客户端提供 Arc 服务，请在代码仓库检出目录中运行 Streamable HTTP 服务：

git clone https://github.com/hudsonkit/arc && cd arc
bun install
ARC_MCP_HOST=127.0.0.1 ARC_MCP_PORT=5190 bun run mcp:http
# MCP endpoint: http://127.0.0.1:5190/mcp · health: /health

变量	默认值	用途
`ARC_MCP_PORT`	`5190`	监听端口
`ARC_MCP_HOST`	`0.0.0.0`	绑定的接口；除非服务位于你自己的身份验证之后，否则请使用 `127.0.0.1`
`ARC_EDITOR_URL`	`http://localhost:5188`	工作室基础 URL，`editor_handoff` 生成的链接指向此处

Arc 不提供公共 MCP 端点。如果需要托管版本，请在 github.com/hudsonkit/arc 提交问题。

MCP Registry

Arc 在注册表中的标识为 io.github.hudsonkit/arc。安装元数据存放在 server.json 中，npm 包也声明了相同的 mcpName，以便注册表验证所有权。

维护者可以运行 Publish to npm GitHub Actions 工作流，并将包范围设为 mcp 以发布仅包含 MCP 更新的补丁版本，或设为 all 以协调发布。该工作流会在构建前设置两个版本，验证打包后的服务，发布 npm，然后使用 GitHub OIDC 发布注册表元数据。试运行会进行验证和打包，但不会发布。发布到官方 MCP Registry 后，还需完成初始入驻流程，才能进入 GitHub 精选的 MCP 目录。