de-otio/diagram-drc

# diagram-drc 自动生成图表的版图检查引擎。 正如 IC 布局工具运行 DRC 来检测硅片上的布线间距违规和路由问题，`diagram-drc` 对图表布局进行质量检查并可自动修复违规。 ## 功能特性 - **检查模式** — 检测布局质量问题而不修改图表 - **修复模式** — 自动修复违规（交叉最小化、间距等） - **可插拔规则** — 内置常见规则，易于添加自定义规则 - **格式无关核心** — 适用于任意图表表示 - **draw.io 渲染器** — 将布局渲染为 mxGraph XML（draw.io 格式） - **Dagre 布局** — 内置 Dagre 有向图布局引擎封装 ## 快速开始 ``` npm install diagram-drc ``` ``` import { createEngine, builtinRules, dagreLayout, renderMxGraph } from 'diagram-drc'; // Define your graph const spec = { nodes: [ { id: 'a', label: 'Service A', width: 48, height: 48 }, { id: 'b', label: 'Service B', width: 48, height: 48 }, { id: 'c', label: 'Database', width: 48, height: 48 }, ], edges: [ { id: 'e1', source: 'a', target: 'c' }, { id: 'e2', source: 'b', target: 'c' }, ], groups: [ { id: 'g1', label: 'Backend', children: ['a', 'b'] }, { id: 'g2', label: 'Data', children: ['c'] }, ], }; // Layout with Dagre const layout = dagreLayout(spec); // Run DRC — check for issues const engine = createEngine({ rules: builtinRules() }); const report = engine.check(layout, spec); console.log(report.passed ? 'All checks passed' : `${report.violations.length} violation(s)`); // Or fix issues automatically const { layout: fixed, report: fixReport } = engine.fix(layout, spec); // Render to draw.io const xml = renderMxGraph(fixed, spec, { title: 'Architecture' }); ``` ## 内置规则 | 规则 | 描述 | |------|-------------| | `crossing-minimization` | 重新排序组内的兄弟节点以最小化边交叉 | | `spacing` | 确保节点边界框之间的最小距离 | ## 编写自定义规则 ``` import type { LayoutRule, LayoutResult, GraphSpec, Violation } from 'diagram-drc'; const myRule: LayoutRule = { id: 'my-custom-rule', description: 'Check something specific to my diagrams', severity: 'warning', check(layout, spec) { // Return violations found return []; }, fix(layout, spec) { // Return corrected layout return layout; }, }; engine.addRule(myRule); ``` ## API ### 引擎 - `createEngine(options?)` — 创建 DRC 引擎 - `engine.check(layout, spec)` — 检测违规（只读） - `engine.fix(layout, spec)` — 修复违规并报告剩余问题 - `engine.addRule(rule)` — 添加规则（可链式调用） ### 布局 - `dagreLayout(spec, options?)` — 在图上运行 Dagre 布局 ### 渲染 - `renderMxGraph(layout, spec, options?)` — 渲染为 draw.io mxGraph XML ## 许可证 MIT

标签：Dagre 布局, draw.io 渲染, DRC, JavaScript 库, Mutation, mxGraph XML, npm 包, TypeScript, 交叉最小化, 修复模式, 前端图表, 可扩展规则, 可视化, 图布局, 图形引擎, 图算法, 安全插件, 插件规则, 数据可视化, 有向图布局, 标签重叠检测, 格式无关核心, 检查模式, 自动修复, 自动化布局, 自动化攻击, 自动排版, 设计规则检查, 质量检查, 间距检测