Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions external_plugins/archify-panel/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist/
vendor/
41 changes: 41 additions & 0 deletions external_plugins/archify-panel/.zcode-plugin/plugin.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
{
"name": "archify-panel",
"version": "0.2.0",
"description": "在 ZCode 侧栏生成并查看 Archify 架构图、流程图、ERD 等图形,可在面板里导出 PNG、SVG 与分享卡片。",
"description_i18n": {
"en": "Generate and view Archify architecture, workflow, ERD and other diagrams in the ZCode side panel, with PNG, SVG and share-card export.",
"zh-CN": "在 ZCode 侧栏生成并查看 Archify 架构图、流程图、ERD 等图形,可在面板里导出 PNG、SVG 与分享卡片。"
},
"author": {
"name": "ZouKD",
"url": "https://github.com/ZouKD"
},
"license": "Apache-2.0",
"skills": "skills",
"mcpServers": {
"archify": {
"type": "stdio",
"command": "node",
"args": ["${ZCODE_PLUGIN_ROOT}/dist/server.mjs"],
"cwd": "${ZCODE_PROJECT_DIR}",
"env": {
"ZCODE_WORKSPACE_ROOT": "${ZCODE_PROJECT_DIR}"
}
}
},
"ui": {
"surfaces": [
{
"id": "archify",
"title": {
"zh-CN": "Archify 画板",
"en-US": "Archify"
},
"icon": "git-branch",
"server": "archify",
"resourceUri": "ui://archify/panel.html",
"availability": "session"
}
]
}
}
24 changes: 24 additions & 0 deletions external_plugins/archify-panel/NOTICE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# NOTICE

## Archify

本插件打包了 [Archify](https://github.com/tt-a1i/archify) v3.2.0 的运行时,位于 `vendor/archify/`,按 Apache-2.0 授权。

- `vendor/archify/LICENSE`:Archify 的 Apache-2.0 授权全文
- `vendor/archify/LICENSE-MIT`:Archify 早期的 MIT 授权,仍然有效
- `vendor/archify/NOTICE`:Archify 原始声明
- `vendor/archify/THIRD_PARTY_NOTICES.md`:Archify 收录的第三方资产与许可

Archify 的名称与标识不表示任何背书或授权关系。

## 对 Archify 的改动

按 Apache-2.0 第 4(b) 条,在此声明对打包代码的修改:

- `vendor/archify/renderers/shared/generated-brand-marks.mjs`:删除了 Jenkins、Rust、Vue.js 三个品牌标的矢量路径数据。三者在 Archify 记录的许可分别是 CC-BY-SA-3.0、CC-BY-SA-4.0、CC-BY-NC-SA-4.0,含有相同方式共享或非商业条件,与本插件的再分发方式冲突。其余 104 个品牌标按原样保留。引用这三个品牌会报 `brand/unknown`。

除上述改动外,Archify 源码未作修改。

## 其它第三方组件

- `@modelcontextprotocol/sdk`(MIT)与 `@modelcontextprotocol/ext-apps`(MIT):构建期依赖,打包进 `dist/server.mjs` 与 `dist/ui/panel.html`。
98 changes: 98 additions & 0 deletions external_plugins/archify-panel/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Archify Panel (archify-panel)

<p align="center">
<img src="assets/icon.png" alt="Archify Panel" width="120" />
</p>

[Archify](https://github.com/tt-a1i/archify), adapted for the ZCode side panel: this plugin bundles Archify's diagram engine (v3.2.0) and brings architecture, workflow, sequence, dataflow, state machine, ERD, class, tree, timeline and waterfall diagrams into the ZCode side panel with full interaction and export.

> Source repository: [tt-a1i/archify](https://github.com/tt-a1i/archify) — the upstream diagram engine (Apache-2.0).

> 中文文档:[README_CN.md](README_CN.md)

## Features

- Agent-driven rendering: describe a diagram in natural language; the agent renders it with the bundled Archify runtime
- Interactive side panel: results open in the ZCode side panel in full-interaction mode
- Export: PNG, SVG and share cards from the diagram's own export menu, saved into the workspace

## Install

Install from the ZCode Plugin Marketplace (**Settings → Plugins → Plugin Marketplace**), search for Archify.

## Usage

After installation, just ask the agent to draw, for example:

- "Draw an architecture diagram of this repository's frontend and backend"
- "Show the login request flow as a sequence diagram"

The agent renders via the bundled skill `archify-panel`; the result opens in the side panel automatically.

## Security & side effects

- **MCP server**: registers a local stdio MCP server `archify` that provides the diagram rendering tools
- **File writes**: rendered artifacts are written to the workspace `.archify-panel/` (exports go to `exports/`)
- **Browser use**: the render pipeline launches the local browser for a measurement step; data stays on the machine
- **Network access**: none. Rendering is fully local; the plugin calls no external services
- **Telemetry**: none

## Build from source

Plugin source lives in `ui-plugins/archify-panel/` in this repository; the install directory contents (`dist/` and `vendor/`) are generated by the repository build:

```bash
pnpm install --frozen-lockfile
pnpm build
```

The build produces `dist/server.mjs` and `dist/ui/panel.html`; `vendor/` is copied into the install directory by the stage script.

Tests (after building):

```bash
node ui-plugins/archify-panel/test/smoke.mjs /tmp/archify-smoke # server: render and read artifacts
node ui-plugins/archify-panel/test/panel-run.mjs # panel: export bridge end to end
```

### Local development (inline loading)

To develop without the marketplace, load the plugin directory directly via `plugins.dirs` in `~/.zcode/cli/config.json`:

```json
{ "plugins": { "dirs": ["/absolute/path/to/archify-panel"] } }
```

- **Use an absolute path.** The desktop app expands `~/`, CLI tools do not.
- **Each `plugins.dirs` entry is a plugin root** (containing `.zcode-plugin/plugin.json` directly), not a parent directory of several plugins.
- **Do not install this plugin from a marketplace at the same time.** The host deduplicates by `name@marketplace`; `archify-panel@inline` and `archify-panel@<marketplace>` are separate keys and both would load — two MCP processes, duplicate panel registrations and skills.

## Structure

```text
.zcode-plugin/plugin.json manifest: MCP server + side panel declaration
skills/archify-panel/SKILL.md skill: how the agent renders and drives the panel
dist/ build output: MCP server and panel frontend
vendor/archify/ bundled Archify runtime (Apache-2.0)
assets/icon.png plugin icon
```

Source (`src/`, `test/` and build scripts) lives in `ui-plugins/archify-panel/` in this repository.

## How it works

The agent calls `render_diagram`; the server runs Archify's `finalize` pipeline (validation, delivery, static checks, browser measurement) and writes the artifact to the workspace `.archify-panel/`, registering it as the current diagram. The side panel reads the artifact HTML via an MCP resource and embeds it in full-interaction mode inside an inner iframe `srcdoc`; the shell renders no toolbar and keeps no status bar, surfacing only a brief toast on errors and export results.

Exports go through the diagram's own "Export" menu. Sandboxed iframes block native downloads, so the panel keeps a permanent export bridge: it intercepts the binary export output, saves it to `.archify-panel/exports/` via `save_export`, and asks the host to open a save dialog.

## Upstream & third-party components

- Upstream source repository: [tt-a1i/archify](https://github.com/tt-a1i/archify). Bundled runtime is Archify v3.2.0, Apache-2.0 (historical MIT grants for pre-transition contributions remain in effect). See [NOTICE.md](NOTICE.md), including modifications declared under Apache-2.0 §4(b).
- `@modelcontextprotocol/sdk` and `@modelcontextprotocol/ext-apps` (MIT): build-time dependencies, bundled into `dist/`.
- The icon is original artwork generated for this plugin; no Archify trademark is used.

This plugin is not affiliated with or endorsed by the Archify project.

## License

Apache-2.0
98 changes: 98 additions & 0 deletions external_plugins/archify-panel/README_CN.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
# Archify 侧栏画板(archify-panel)

<p align="center">
<img src="assets/icon.png" alt="Archify 侧栏画板" width="120" />
</p>

[Archify](https://github.com/tt-a1i/archify) 的 ZCode 侧栏适配:本插件打包 Archify v3.2.0 图形引擎,把架构图、流程图、时序图、数据流、状态机、ERD、类图、树、时间线、瀑布图带进 ZCode 侧栏面板,支持完整交互与导出。

> 源仓库:[tt-a1i/archify](https://github.com/tt-a1i/archify) —— 上游图形引擎(Apache-2.0)。

> English documentation: [README.md](README.md)

## 功能

- Agent 出图:用自然语言描述,Agent 调用内置 Archify 运行时完成渲染
- 侧栏交互:渲染结果直接在 ZCode 侧栏面板中以完整交互模式打开
- 导出:从图形自带的导出菜单导出 PNG、SVG 与分享卡片,落盘到工作区

## 安装

在 ZCode 插件市场安装:**设置 → 插件 → 插件市场**,搜索 Archify 安装即可。

## 使用

安装后直接让 Agent 画图,例如:

- 「用架构图画出这个仓库的前后端结构」
- 「画一张登录请求的时序图」

Agent 会通过内置技能 `archify-panel` 完成渲染,产物自动在侧栏面板打开。

## 安全与副作用

- **MCP 服务**:注册本地 stdio MCP 服务 `archify`,提供图形渲染相关工具
- **文件写入**:渲染产物写入工作区 `.archify-panel/`(导出文件在 `exports/` 子目录)
- **浏览器调用**:渲染管线的测量环节会启动本机浏览器完成尺寸测量,数据不出本机
- **网络访问**:无。渲染完全在本地进行,不调用外部服务
- **遥测**:无

## 从源码构建

插件源码在本仓库 `ui-plugins/archify-panel/`,安装目录内容(`dist/` 与 `vendor/`)由仓库统一构建生成:

```bash
pnpm install --frozen-lockfile
pnpm build
```

构建产出 `dist/server.mjs` 与 `dist/ui/panel.html`,`vendor/` 由 stage 脚本复制进安装目录。

本地测试(需先构建):

```bash
node ui-plugins/archify-panel/test/smoke.mjs /tmp/archify-smoke # 服务端:出图、读产物
node ui-plugins/archify-panel/test/panel-run.mjs # 面板:模拟宿主下走一遍导出链路
```

### 本地开发(inline 加载)

不经过市场、直接开发调试时,可在 `~/.zcode/cli/config.json` 用 `plugins.dirs` 直接加载插件目录:

```json
{ "plugins": { "dirs": ["/绝对路径/archify-panel"] } }
```

- **路径必须写绝对路径**。桌面端能展开 `~/`,命令行工具不能。
- **`plugins.dirs` 的每一项本身就是一个插件根目录**(直接含 `.zcode-plugin/plugin.json`),不是包含多个插件的父目录。
- **不要同时从市场安装本插件。** 宿主的插件去重键是 `名称@市场`,`archify-panel@inline` 与 `archify-panel@某市场` 是两个不同的键,两份都会被加载 —— MCP 服务会起两个进程,侧栏面板注册两次,技能重名。

## 结构

```text
.zcode-plugin/plugin.json 插件清单:MCP 服务 + 侧栏面板声明
skills/archify-panel/SKILL.md Agent 写图与调用面板的说明
dist/ 构建产物:MCP 服务端与面板前端
vendor/archify/ 打包的 Archify 运行时(Apache-2.0)
assets/icon.png 插件标识
```

源码(`src/`、`test/` 与构建脚本)位于本仓库 `ui-plugins/archify-panel/`。

## 工作原理

Agent 调用 `render_diagram`,服务端跑 Archify 的 `finalize`(校验、交付、静态检查、浏览器测量四道关卡),产物落盘到工作区 `.archify-panel/` 并登记为当前图。侧栏面板通过 MCP 资源读取产物 HTML,以完整交互模式塞进内层 iframe 的 `srcdoc`;面板薄壳不渲染任何工具栏,也不保留常驻状态栏,只有出错或导出结果会浮出一小条提示。

导出走图形自带的「导出」菜单。沙箱 iframe 里浏览器会拦截原生下载,所以面板常驻一条导出桥接:截获产物导出产生的二进制,经 `save_export` 落到工作区 `.archify-panel/exports/`,并请求宿主弹出另存为。

## 上游与第三方组件

- 上游源仓库:[tt-a1i/archify](https://github.com/tt-a1i/archify)。打包运行时为 Archify v3.2.0,Apache-2.0(过渡前的历史 MIT 授权仍有效)。详见 [NOTICE.md](NOTICE.md),含按 Apache-2.0 第 4(b) 条声明的修改。
- `@modelcontextprotocol/sdk` 与 `@modelcontextprotocol/ext-apps`(MIT):构建期依赖,打包进 `dist/`。
- 图标为本插件原创生成,不使用 Archify 的商标与标识。

本插件与 Archify 官方无隶属关系,也未获其背书。

## 许可

Apache-2.0
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions external_plugins/archify-panel/skills/archify-panel/SKILL.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
---
name: archify-panel
description: "用 Archify 生成架构图、流程图、时序图、数据流、状态机、ERD、类图、树、时间线与瀑布图,产物直接显示在 ZCode 侧栏面板,可在面板里导出 PNG、SVG 与分享卡片。当用户要画图、画架构、画流程、画时序、画状态机、画 ERD、画类图、看代码库结构、看请求时序、看故障时间线时使用。"
license: Apache-2.0
---

# Archify 侧栏画板

用 Archify 的 JSON IR 描述一张图,插件把它渲染成单文件 HTML 并显示在 ZCode 侧栏面板。

## 何时使用

用户要画图、看结构、看时序、做架构梳理时使用本技能。图是本技能唯一的交付物,文字只用来补充图里放不下的结论。

## 怎么生成

先调用 `get_authoring_assets` 拿到 schema 与用例的绝对路径,读完对应 schema 再调用 MCP 工具 `render_diagram`:

```text
render_diagram(type, spec, title, quality?)
```

- `type`:图的类型,见下面的类型路由表
- `spec`:完整的 Archify JSON IR(对象)
- `title`:图的标题,同时是导出文件名
- `quality`:`showcase`(默认,信息密度适合阅读)或 `standard`(密集大图)

工具返回后会做四道质量关卡(校验、交付、静态检查、浏览器测量)。关卡全过时用户看到的是一张成品图;浏览器关卡被跳过时图照样交付,工具结果里会写明"未做浏览器校验",回复时如实转达。

工具失败时按返回的 `diagnostics` 修图再调一次,不要反复提交同一份。

## 类型路由

写图前先调用 `get_authoring_assets`,它返回 schema、用例与写作参考的绝对路径;读对应 schema 再写字段,用例只学形状不抄内容。

| 类型 | 用途 | Schema | 用例 |
|---|---|---|---|
| `architecture` | 组件、服务、云与安全边界、基础设施 | `architecture.schema.json` | `production-deployment.architecture.json` |
| `workflow` | 流程、审批关卡、工具调用、CI/CD | `workflow.schema.json` | `agent-tool-call.workflow.json` |
| `sequence` | 接口调用链、请求生命周期、异步追踪 | `sequence.schema.json` | `cache-miss-request.sequence.json` |
| `dataflow` | 管道、ETL/ELM、血缘、数据治理 | `dataflow.schema.json` | `product-analytics.dataflow.json` |
| `lifecycle` | 状态与状态迁移、重试、等待、终态 | `lifecycle.schema.json` | `deployment-release.lifecycle.json` |
| `erd` | 表与实体、字段、主外键、基数 | `erd.schema.json` | `orders.erd.json` |
| `class` | 类、接口、成员、依赖与继承关系 | `class.schema.json` | `payments.class.json` |
| `tree` | 单父级包含:仓库树、模块树、能力拆解 | `tree.schema.json` | `payment-platform.tree.json` |
| `timeline` | 何时发生:故障复盘、发布史、事件时钟 | `timeline.schema.json` | `payment-incident.timeline.json` |
| `waterfall` | 时间花在哪:一次请求或一次运行的耗时分布 | `waterfall.schema.json` | `checkout-request.waterfall.json` |

字段细节见 `authoring-contract.md`,整体画法约定见 `authoring-defaults.md`,画真实仓库时再读 `repository-authoring.md`。

## 写图的要点

- 所有图共用顶层:`schema_version`、`diagram_type`、`meta`、`cards`(可选)。`meta` 里放 `title`、`subtitle`、`locale`、`quality_profile`。
- 节点与关系用新写的 ID 与措辞,不要复制用例里的原句。
- 没有节点数目标:写全该写的,不为了凑数删关系,也不为了填满加关系。
- 优先让渲染器自动布线,只在分支、回路或实测拥挤处指定路径。
- `meta.quality_profile` 默认 `showcase`;只有确实很密的大图才用 `standard`。
- ERD 用表优先画法:字段写在 `entities[].attributes` 里并保留 SQL 类型,`key` 可以是数组(连接表写 `["pk","fk"]`),每个 `fk` 字段都要有 `references`;按业务域分组,每个域用 `tag` 标注并排成一块矩形。
- 需要品牌图标时用 `icon` 或 `brand` 字段。Jenkins、Rust、Vue 三个品牌标已从本插件中剔除(许可限制),用到它们会报 `brand/unknown`,换成中性图标或文字即可。

## 用户在面板里能做什么

- 面板只承载图形本体,常驻完整交互视图,没有额外的面板工具栏。
- 导出、主题、视图预设都在图形自带的工具栏里操作:「导出」菜单可以出 PNG、SVG、WebM 录屏与分享卡片,文件落在工作区 `.archify-panel/exports/` 并弹出另存为。
- 分享卡片需要先在图上选一条路径或一个节点。
- 想让面板切换显示哪张图,直接在对话里说,Agent 调 `open_diagram`。

面板里的图就是交付物,回复时一句话给出结论或提示即可,不要复述图上已有的内容。
24 changes: 24 additions & 0 deletions marketplace.json
Original file line number Diff line number Diff line change
Expand Up @@ -1443,6 +1443,30 @@
"mcp",
"verification"
]
},
{
"name": "archify-panel",
"source": "./external_plugins/archify-panel",
"description": "在 ZCode 侧栏生成并查看 Archify 架构图、流程图、ERD 等图形,可在面板里导出 PNG、SVG 与分享卡片。",
"description_i18n": {
"en": "Generate and view Archify architecture, workflow, ERD and other diagrams in the ZCode side panel, with PNG, SVG and share-card export.",
"zh-CN": "在 ZCode 侧栏生成并查看 Archify 架构图、流程图、ERD 等图形,可在面板里导出 PNG、SVG 与分享卡片。"
},
"version": "0.2.0",
"author": {
"name": "ZouKD",
"url": "https://github.com/ZouKD"
},
"category": "developer-tools",
"keywords": [
"diagram",
"architecture",
"workflow",
"sequence",
"erd",
"visualization"
],
"license": "Apache-2.0"
}
]
}
Loading