【免费下载链接】dsh-genuiGenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.项目地址https://gitcode.com/gh_mirrors/ds/dsh-genui点击查看免费下载dsh-genui diagram 组件是开源项目 dsh-genui 的一等公民可视化组件AI 助手只需在回复中输出一段 JSON 声明节点、边、布局意图浏览器就会自动渲染出品牌化、正交连线、带语义配色的SVG 编辑级图表——架构图、流程图、时序图、甘特图、组织架构图等共27 种类型全部内置复杂度预算与可访问性外壳模型想画丑都难。上面这类内联在对话流里的专业面板正是 dsh-genui 通过dsh-ui围栏渲染出的效果而diagram组件就是其中最像设计稿的那一族。为什么 diagram 组件适合画架构图传统做法里让 AI 画架构图通常有两条路手写 SVG又长又脆还经常溢出画布或用 Mermaid 自动布局快但排版随机。dsh-genui 的diagram组件走了第三条路——声明式数据 渲染器强制规范模型只负责输出数据谁连谁、什么类型、放哪个区域布局、连线、配色、网格对齐、图例全部由渲染器按 diagram-design 编辑级规范精确排版复杂度预算节点数、边数、焦点色数量由守卫层钳制超出一律截断降级。一句话模型给意图渲染器管品味。完整的设计基线见 docs/diagram-component-design.md。27 种 kind 全清单坐标类 vs 规则类27 种类型定义在 src/client/spec.ts 的DIAGRAM_KINDS中分为两大布局模式坐标类7 种模型亲手定位节点自带x/y/w/h坐标自动对齐到 4px 网格渲染器负责正交连线和边标签kind适用场景复杂度预算architecture系统架构 / 服务拓扑≤9 节点 / ≤12 边 / ≤3 分区it-stateIT 阶段分组≤9 节点high-level高层方案概览≤9 节点process多角色流程 数据交接≤9 节点medallion数据湖金/银/铜分层≤9 节点data-flow数据流链路≤9 节点dp-integration源→核心→消费者集成图≤9 节点规则类20 种只给数据自动排版模型不用写一个坐标渲染器按类型规则自动布局分类kind预算流程类flowchart/sequence/state/swimlane/loop节点 ≤9lifelines ≤5lanes ≤5stations ≤8数据类er/tree/org-chart/nested/layers/pyramid/venn实体 ≤8树深 ≤4层级 ≤6图表示意类timeline/quadrant/radar/bar/line/gantt/scatter事件 ≤12点 ≤30series ≤5专项类dp-security-matrix≤9×9 角色权限矩阵 选型口诀要精确控制位置品牌图、方案图→ 用坐标类只想把数据摊平时序、树、甘特→ 用规则类。设计系统语义 token 与三套主题theme.ts 把 diagram-design 的语义 token 系统完整移植进渲染器——所有颜色都按角色取用paper / ink / muted / accent / link…绝不散落成内联十六进制角色LightDark含义paper#f5f5f5#2d3142画布底色点阵纸底纹ink#2d3142#f5f5f5主文字 / 描边accent#eb6c36#f08a59焦点色全图最多 2 处link#2e5aa8#6a95d8HTTP/API 链接色通过variant字段切换皮肤缺省跟随宿主主题暗色环境自动切深色 tokenvariant: light/dark锁定对应皮肤variant: editorial完整编辑级皮肤。还可以用theme字段覆盖任意 token如theme: { accent: #c94f1e }品牌色即插即用。7 种节点语义类型节点通过type获得差异化处理填充 描边 虚线配合底部Legend 色板条自动图例类型视觉语言典型用途focal焦点色描边 淡色底主角服务预算 ≤2 个超出自动降级backend纸色底 主墨色边常规后端组件store极淡填充 灰边数据库 / 缓存external更淡 浅描边第三方系统input柔和灰底输入 / 触发器optional虚线边框可选模块security焦点色淡底 虚线安全边界组件被渲染器强制的规则图为什么画不丑这是 diagram 组件最有意思的部分——反 AI-slop 清单全部硬编码在渲染器里模型无法绕过4px 网格所有坐标、尺寸取整到 4守卫层grid4()完成见 guard.ts正交连接器geometry.ts 只产出H/V/Q命令的圆角折线r8永远不画斜线端口智能选择水平移动走左右端口、垂直移动走上下端口同侧多连线按 (k1)/(n1) 扇形错开 ≥12px边标签遮罩标签背后垫一块不透明纸色小矩形6–10px 离线上色永不压线复杂度预算节点 ≤9、边 ≤12、分区 ≤3、焦点 ≤2、边标签 ≤14 字符硬编码在 limits.ts超限直接截断z-order 规范底纹 → 分区 → 连线 → 节点 → 图例箭头永不穿箱反模式内置无阴影、无发光、圆角 ≤8px、图例固定底部条。未知kind会被守卫直接拒绝坐标类缺坐标时自动回落到三列网格——容错也在渲染链路里闭环。代码在哪里四模块渲染器结构整个组件只有 4 个文件结构干净得可以逐行读完模块职责src/client/blocks/diagram/index.tsxDiagramNode入口主题解析、点阵纸底、分区/图例、a11y 外壳src/client/blocks/diagram/layout.tskind → 布局器路由坐标透传 / 树形 / 分层 / 行列排布src/client/blocks/diagram/geometry.ts正交路径、端口选择、扇形错位、标签几何src/client/blocks/diagram/theme.ts语义 token 表、三套皮肤、节点处理映射模型侧的教学则由 SKILL.md 与宿主插件的GENUI_SECTION_TEXT承担——教模型 27 种 kind 的字段语法和何时用 diagram 而非 mermaid的决策表。diagram 和 mermaid 怎么分工两者在 dsh-genui 里并存互补官方组件映射表给得很明确需求选谁快速画个 flowchart / sequence 自动布局mermaid要编辑级品牌感的架构 / 数据流 / 拓扑图diagram数学函数、带滑块动画的曲线plot手绘感 SVG 预览svgmermaid覆盖的是自动布局的通用图diagram覆盖的是设计师会签字的图——同一条回复里可以各用各的互不冲突。上手速查让助手为你画图作为普通用户你甚至不用懂这些内部结构——在接入 dsh-genui 插件的宿主里直接提需求即可帮我画一张系统架构图网关是重点标注出数据库和外部支付用泳道图说明订单从下单到结算的跨团队流程画一张 dark 主题的数据湖 medallion 分层图。助手会在回复里输出dsh-ui围栏的声明式 JSON浏览器端的diagram组件随即渲染成内联 SVG根节点带roleimgaria-label屏幕阅读器可读viewBox自适应容器宽度缩到手机里也不糊。最小可用的声明长这样节点给坐标 边给语义其余交给渲染器{ type: diagram, kind: architecture, title: 订单系统架构, variant: dark, nodes: [ { id: gw, label: API 网关, type: focal, x: 40, y: 40, w: 128, h: 48, tag: API }, { id: db, label: Postgres, type: store, x: 280, y: 40, w: 128, h: 48, sub: rds:5432 } ], edges: [ { from: gw, to: db, label: WRITE, kind: accent } ] }小结27 种 kind7 种坐标类精确定位 20 种规则类自动排版覆盖架构、流程、数据、矩阵全场景语义 token 主题light/dark/editorial 三皮肤 逐字段theme覆盖品牌化零成本规范硬编码4px 网格、正交连线、焦点色 ≤2、复杂度预算丑图在渲染链路里被物理消灭与 mermaid 分工明确自动布局找 mermaid编辑级品牌图找 diagram。想继续深挖建议按顺序读docs/diagram-component-design.md设计基线→ src/client/blocks/diagram/渲染器源码→ tests/genui-diagram.spec.tsx27 种 kind 的渲染冒烟测试。赞分享【免费下载链接】dsh-genuiGenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.项目地址https://gitcode.com/gh_mirrors/ds/dsh-genui点击查看免费下载相关推荐chart 还是 echartdsh-genui 图表组件选型指南与 13 种预设模式详解chart 还是 echartdsh genui 图表组件选型指南与 13 种预设模式详解 dsh genui 是 DeepSeek Harness 的生成式dsh-genui 能力全景30 交互组件让聊天窗口变成仪表盘、图表与 3D 场景dsh genui 能力全景30 交互组件让聊天窗口变成仪表盘、图表与 3D 场景 dsh genui 是面向 DeepSeek HarnessDSH的diagram-design 技术指南为 Claude Code / Codex 生成 39 种编辑级品质图表的 Skill 全面解析diagram design 技术指南为 Claude Code / Codex 生成 39 种编辑级品质图表的 Skill 全面解析 diagram desAI 技能/插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/28 21:55:00 · 阅读 1.2k 27 种编辑级图表：dsh-genui diagram 组件深度拆解
【免费下载链接】dsh-genuiGenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.项目地址https://gitcode.com/gh_mirrors/ds/dsh-genui点击查看免费下载dsh-genui diagram 组件是开源项目 dsh-genui 的一等公民可视化组件AI 助手只需在回复中输出一段 JSON 声明节点、边、布局意图浏览器就会自动渲染出品牌化、正交连线、带语义配色的SVG 编辑级图表——架构图、流程图、时序图、甘特图、组织架构图等共27 种类型全部内置复杂度预算与可访问性外壳模型想画丑都难。上面这类内联在对话流里的专业面板正是 dsh-genui 通过dsh-ui围栏渲染出的效果而diagram组件就是其中最像设计稿的那一族。为什么 diagram 组件适合画架构图传统做法里让 AI 画架构图通常有两条路手写 SVG又长又脆还经常溢出画布或用 Mermaid 自动布局快但排版随机。dsh-genui 的diagram组件走了第三条路——声明式数据 渲染器强制规范模型只负责输出数据谁连谁、什么类型、放哪个区域布局、连线、配色、网格对齐、图例全部由渲染器按 diagram-design 编辑级规范精确排版复杂度预算节点数、边数、焦点色数量由守卫层钳制超出一律截断降级。一句话模型给意图渲染器管品味。完整的设计基线见 docs/diagram-component-design.md。27 种 kind 全清单坐标类 vs 规则类27 种类型定义在 src/client/spec.ts 的DIAGRAM_KINDS中分为两大布局模式坐标类7 种模型亲手定位节点自带x/y/w/h坐标自动对齐到 4px 网格渲染器负责正交连线和边标签kind适用场景复杂度预算architecture系统架构 / 服务拓扑≤9 节点 / ≤12 边 / ≤3 分区it-stateIT 阶段分组≤9 节点high-level高层方案概览≤9 节点process多角色流程 数据交接≤9 节点medallion数据湖金/银/铜分层≤9 节点data-flow数据流链路≤9 节点dp-integration源→核心→消费者集成图≤9 节点规则类20 种只给数据自动排版模型不用写一个坐标渲染器按类型规则自动布局分类kind预算流程类flowchart/sequence/state/swimlane/loop节点 ≤9lifelines ≤5lanes ≤5stations ≤8数据类er/tree/org-chart/nested/layers/pyramid/venn实体 ≤8树深 ≤4层级 ≤6图表示意类timeline/quadrant/radar/bar/line/gantt/scatter事件 ≤12点 ≤30series ≤5专项类dp-security-matrix≤9×9 角色权限矩阵 选型口诀要精确控制位置品牌图、方案图→ 用坐标类只想把数据摊平时序、树、甘特→ 用规则类。设计系统语义 token 与三套主题theme.ts 把 diagram-design 的语义 token 系统完整移植进渲染器——所有颜色都按角色取用paper / ink / muted / accent / link…绝不散落成内联十六进制角色LightDark含义paper#f5f5f5#2d3142画布底色点阵纸底纹ink#2d3142#f5f5f5主文字 / 描边accent#eb6c36#f08a59焦点色全图最多 2 处link#2e5aa8#6a95d8HTTP/API 链接色通过variant字段切换皮肤缺省跟随宿主主题暗色环境自动切深色 tokenvariant: light/dark锁定对应皮肤variant: editorial完整编辑级皮肤。还可以用theme字段覆盖任意 token如theme: { accent: #c94f1e }品牌色即插即用。7 种节点语义类型节点通过type获得差异化处理填充 描边 虚线配合底部Legend 色板条自动图例类型视觉语言典型用途focal焦点色描边 淡色底主角服务预算 ≤2 个超出自动降级backend纸色底 主墨色边常规后端组件store极淡填充 灰边数据库 / 缓存external更淡 浅描边第三方系统input柔和灰底输入 / 触发器optional虚线边框可选模块security焦点色淡底 虚线安全边界组件被渲染器强制的规则图为什么画不丑这是 diagram 组件最有意思的部分——反 AI-slop 清单全部硬编码在渲染器里模型无法绕过4px 网格所有坐标、尺寸取整到 4守卫层grid4()完成见 guard.ts正交连接器geometry.ts 只产出H/V/Q命令的圆角折线r8永远不画斜线端口智能选择水平移动走左右端口、垂直移动走上下端口同侧多连线按 (k1)/(n1) 扇形错开 ≥12px边标签遮罩标签背后垫一块不透明纸色小矩形6–10px 离线上色永不压线复杂度预算节点 ≤9、边 ≤12、分区 ≤3、焦点 ≤2、边标签 ≤14 字符硬编码在 limits.ts超限直接截断z-order 规范底纹 → 分区 → 连线 → 节点 → 图例箭头永不穿箱反模式内置无阴影、无发光、圆角 ≤8px、图例固定底部条。未知kind会被守卫直接拒绝坐标类缺坐标时自动回落到三列网格——容错也在渲染链路里闭环。代码在哪里四模块渲染器结构整个组件只有 4 个文件结构干净得可以逐行读完模块职责src/client/blocks/diagram/index.tsxDiagramNode入口主题解析、点阵纸底、分区/图例、a11y 外壳src/client/blocks/diagram/layout.tskind → 布局器路由坐标透传 / 树形 / 分层 / 行列排布src/client/blocks/diagram/geometry.ts正交路径、端口选择、扇形错位、标签几何src/client/blocks/diagram/theme.ts语义 token 表、三套皮肤、节点处理映射模型侧的教学则由 SKILL.md 与宿主插件的GENUI_SECTION_TEXT承担——教模型 27 种 kind 的字段语法和何时用 diagram 而非 mermaid的决策表。diagram 和 mermaid 怎么分工两者在 dsh-genui 里并存互补官方组件映射表给得很明确需求选谁快速画个 flowchart / sequence 自动布局mermaid要编辑级品牌感的架构 / 数据流 / 拓扑图diagram数学函数、带滑块动画的曲线plot手绘感 SVG 预览svgmermaid覆盖的是自动布局的通用图diagram覆盖的是设计师会签字的图——同一条回复里可以各用各的互不冲突。上手速查让助手为你画图作为普通用户你甚至不用懂这些内部结构——在接入 dsh-genui 插件的宿主里直接提需求即可帮我画一张系统架构图网关是重点标注出数据库和外部支付用泳道图说明订单从下单到结算的跨团队流程画一张 dark 主题的数据湖 medallion 分层图。助手会在回复里输出dsh-ui围栏的声明式 JSON浏览器端的diagram组件随即渲染成内联 SVG根节点带roleimgaria-label屏幕阅读器可读viewBox自适应容器宽度缩到手机里也不糊。最小可用的声明长这样节点给坐标 边给语义其余交给渲染器{ type: diagram, kind: architecture, title: 订单系统架构, variant: dark, nodes: [ { id: gw, label: API 网关, type: focal, x: 40, y: 40, w: 128, h: 48, tag: API }, { id: db, label: Postgres, type: store, x: 280, y: 40, w: 128, h: 48, sub: rds:5432 } ], edges: [ { from: gw, to: db, label: WRITE, kind: accent } ] }小结27 种 kind7 种坐标类精确定位 20 种规则类自动排版覆盖架构、流程、数据、矩阵全场景语义 token 主题light/dark/editorial 三皮肤 逐字段theme覆盖品牌化零成本规范硬编码4px 网格、正交连线、焦点色 ≤2、复杂度预算丑图在渲染链路里被物理消灭与 mermaid 分工明确自动布局找 mermaid编辑级品牌图找 diagram。想继续深挖建议按顺序读docs/diagram-component-design.md设计基线→ src/client/blocks/diagram/渲染器源码→ tests/genui-diagram.spec.tsx27 种 kind 的渲染冒烟测试。赞分享【免费下载链接】dsh-genuiGenUI for DeepSeek Harness: interactive UI components rendered inline in assistant replies via the dsh-ui fence — layout, charts, plots, forms, quizzes, mermaid, 3D scenes, and an action event loop back to the model. Ships the fence-teaching host plugin, the browser renderer (client half), and the genui skill.项目地址https://gitcode.com/gh_mirrors/ds/dsh-genui点击查看免费下载相关推荐chart 还是 echartdsh-genui 图表组件选型指南与 13 种预设模式详解chart 还是 echartdsh genui 图表组件选型指南与 13 种预设模式详解 dsh genui 是 DeepSeek Harness 的生成式dsh-genui 能力全景30 交互组件让聊天窗口变成仪表盘、图表与 3D 场景dsh genui 能力全景30 交互组件让聊天窗口变成仪表盘、图表与 3D 场景 dsh genui 是面向 DeepSeek HarnessDSH的diagram-design 技术指南为 Claude Code / Codex 生成 39 种编辑级品质图表的 Skill 全面解析diagram design 技术指南为 Claude Code / Codex 生成 39 种编辑级品质图表的 Skill 全面解析 diagram desAI 技能/插件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考