流程图生成器（flowchart-gen）· 立创EDA Pro 扩展

从结构化 Spec 自动生成流程图并绘制到原理图页。采用数据驱动设计，借鉴 mermaid / dagre 的「数据层 / 布局层 / 渲染层」三段式架构，并内置「CH32L103 固件代码构建」示例。

本扩展对应「路线 B」：专业版扩展插件（pro-api-sdk + extension.json + 打包 .eext）。

目录结构

lceda_extension/
├── extension.json            # 扩展清单（注册原理图头部菜单）
├── package.json              # 构建脚本（build / debug）
├── tsconfig.json
├── .npmrc                    # 国内 npm 镜像
├── src/
│   ├── index.ts              # 入口：导出 openFlowchartPanel（打开面板；含 iframe→宿主 绘制桥）
│   └── flowchart/
│       ├── types.ts          # 数据模型（SpecNode / SpecEdge / Spec / PlacedNode ...）
│       ├── layout.ts         # 布局层：自动测量文字→定框→分层定位→正交走线
│       ├── draw.ts           # 渲染层：坐标 → eda.sch_* 原理图图元
│       └── spec.ts           # 数据层：内置 BUILD_FLOWCHART 示例
├── iframe/
│   └── panel.html            # 侧边面板：粘贴自定义 SPEC JSON 生成
├── images/
│   └── logo.png
└── build/
    ├── packaged.js           # 生产构建（打包到 build/dist/）
    └── debug.js              # 监听热重建

同源 SVG 生成器见 ../hardware/flowchart_gen.py，可独立产出 code_build_flowchart_v2.svg（已通过自校验：0 穿越、0 文字溢出）。两条路线共用同一套布局参数。

功能演示

一键落图效果

「CH32L103 固件构建系统」示例：粘贴 JSON → 点「生成」 → 流程图直接绘制到原理图页（原生 sch_ 图元），统一框尺寸、统一间距、边标签智能防遮挡。

侧边面板三页签

• Spec 框图：JSON 编辑 → 加载示例 → 一键生成 → 撤销上次 → 生成图片（SVG 预览/复制）
• Mermaid：DSL 编辑 → 渲染预览 → 下载 PNG / 复制 SVG（引擎离线内置）
• 关于与帮助：使用说明 + AI 生成提示词模板一键复制

各页签状态截图

页签	截图
Spec 框图（初始）
Spec 框图（生成图片预览）
Mermaid 预览（渲染完成）
关于与帮助

演示图通过 URL 参数 ?demo=svg|mm|help 自动触发对应操作（用户正常打开面板不触发，仅用于自动化截图）。

环境要求

• Node.js ≥ 20.5.0（pro-api-sdk 要求）
• 嘉立创EDA专业版（启用 pro-api，engines eda ^2.3.0）
• 网络连接（首次 npm install）

构建

cd lceda_extension
npm install          # 安装 esbuild / typescript / pro-api-types
npm run build        # 产出可安装扩展包于 ./build/dist/

首次 npm run build 会在 extension.json 中自动写入 UUID。

安装到嘉立创EDA专业版

1. 打开嘉立创EDA专业版 → 右上角「扩展」→「本地扩展」／「管理扩展」。
2. 选择本项目的 lceda_extension/build/dist/ 目录（即打包产物根，内含 extension.json 与 dist/）。
3. 安装后启用；在原理图页顶部菜单出现「流程图生成器」分组，仅一个菜单项：
   • 打开流程图面板... —— 打开侧边面板，可「加载示例」或粘贴任意 Spec JSON 后点「生成」。 （面板本身可在任意页打开；但「生成」绘制到原理图需要处于已激活的原理图文档页。）

Spec 数据格式

{
  "nodes": [
    { "id": "start", "label": "开始", "type": "start", "rank": 0, "lane": "C" }
    // type: start|end|proc|io|build|decision|product
    // lane: L(左) | C(中) | R(右)   rank: 自上而下层级
    // label 多行用 \n 分隔
  ],
  "edges": [
    { "from": "a", "to": "b", "label": "可选", "kind": "fwd" }
    // kind: fwd(正向) | back(回边, 红色虚线回路)
  ],
  "subgraphs": [
    { "label": "构建子步骤", "members": ["pre","compile","asm","link"] }
  ]
}

坐标单位说明（重要）

原理图坐标单位 = 10 mil = 0.01 inch（PCB 为 1 mil）。布局引擎输出的坐标已是 原理图单位，直接喂给 eda.sch_* API 即可，无需额外换算；如需缩放可调整 draw.ts 中的 SCALE 常量（默认 1），文字尺寸由 FS_SCALE（默认 1.6）放大以保证可读性。

渲染层所用 API（均返回 Promise，需 await）

注：sch_PrimitivePolygon / sch_PrimitiveText / sch_PrimitiveWire 在官方文档中标记为 BETA，签名可能随版本调整，请留意 pro-api-types 更新。

自定义 / 扩展

• 新增流程图：在 src/flowchart/spec.ts 增加一个 Spec 常量，并在 src/index.ts 注册 新的 registerFn（同步在 extension.json 的 headerMenus.sch[].menuItems 增加一项）。
• 调整布局：修改 src/flowchart/layout.ts 的 LANE_X / ROW_H / RANK_GAP / COL_GAP / PAD_* 等常量；改动会同步反映到 SVG 生成器（保持两者参数一致）。
• 面板 UI：编辑 iframe/panel.html（原生 HTML/CSS/JS，无需编译）。

打包为 .eext（一键生成可分发包）

.eext 本质是一个 ZIP，内部根目录需含 extension.json。在 npm run build 之后：

npm run pack        # 产出 build/flowchart-gen-1.0.0.eext

build/package-eext.js 用纯 Node 的 archiver 实现，跨平台（Windows / macOS / Linux 均可）。 生成后可直接在嘉立创EDA专业版「扩展 → 从本地文件安装」选择该 .eext。

若你的机器有 PowerShell，也可手动等价操作：Compress-Archive -Path build\dist\* -DestinationPath build\flowchart-gen-1.0.0.eext -Force

面板里粘贴的 JSON 从哪来？

「打开流程图面板…」的用途是：不重新编译，就能把任意一张流程图画到原理图。 面板里「生成」按钮需要一份符合 Spec 结构的 JSON，数据来源有三种：

1. 点「加载示例」（最省事）：面板自动填入内置的 BUILD_FLOWCHART（即 code_build_flowchart_v2.svg 那张「CH32L103 固件代码构建」图），直接点「生成」即可，无需自己写。
2. 参考示例文件手写：本仓库 example-spec.json 就是上面那份「示例」的原始 JSON。 按相同结构改 nodes / edges / subgraphs 即可描述你自己的流程图（schema 见下文「Spec 数据格式」）。
3. 让我帮你整理：把你的硬件框图 / 状态机描述给我，我将其整理成 Spec JSON 文件， 你存成 .json 后粘贴进面板即可（或我直接更新 example-spec.json / src/flowchart/spec.ts）。

一句话：JSON 是你对「流程图长什么样」的文本化描述（一个迷你 DSL），不是从别处自动抓取的数据。 面板的「加载示例」按钮内置了同一张「代码构建」示例，点「生成」即可绘制，无需重新编译扩展。

许可

Apache-2.0