【免费下载链接】ljg-skills项目地址https://gitcode.com/gh_mirrors/lj/ljg-skills点击查看免费下载图让关系直接可见但前提是「关系真实存在」。在 ljg-present 的演讲铸造体系中图表不是装饰配额而是一类受数据契约约束的语义角色源中有数据、顺序或关系才画不补数值曲线不把并列或相关性擅自升级为因果箭头。本文围绕 ChartSpec.md 展开完整讲解「原生 chartbar / line / flow / compare」与「结构化 Unicode 关系图diagram」两类图表的 JSON 数据格式、字段约束、渲染语义与验收标准并对照 DeckData.ts 的源码校验与 CompositionDeck.json 的可复现样例让你能写出可被构建工具直接验证、可被浏览器逐项核对的图表数据。读完本文你将掌握如何为一段演讲内容选择 chart、diagram 还是 pre四种原生图表的字段规则与数值约束diagram 节点/边的布局锚点与语义方向约定以及图表在 faithful 与 editorial 两种模式下如何通过 sourceIds / derivedFrom 保持溯源。图表在内容契约中的定位图表属于 ljg-present 的八个显式语义角色之一identity、chapter、statement、sequence、quotation、chart、evidence见 RenderingSpec.md。每页恰好一个主体chart 角色只能承载chart或diagram一种主体这一约束在 DeckData.ts 中被硬性校验[lines,pre,table,chart,diagram]五个主体字段中必须恰好出现一个。图表契约的第一条原则是「表达选择」根据材料的本质决定用哪一种载体。材料主体数量、趋势、简单流程、双向对照chart回路、分支、非线性节点关系diagramUnicode 连接 自然文字标签真代码、需逐字符保留的源 ASCII/Unicodepre选择依据是关系是否可以被「结构化」数量与趋势进入 chart回路、分支这类节点关系进入 diagram而需要逐字符保真的代码或原始字符图必须走 pre绝不能把源码重新画成节点图。这与 RenderingSpec.md 中「真实代码和未授权重绘的源图使用 pre新关系图采用结构化 diagram」的规定一致——Unicode 连接与自然文字标签分开绘制正是 diagram 契约的出发点。图表同样受两种内容模式约束详见 SKILL.mdfaithful保真排版已有投影提纲且未授权改写。补充图必须紧跟原文页并用derivedFrom引用原文原文页本身仍保留不被图替代。editorial演讲编排用户已授权提炼、重组或重绘图。可以新图承载同一关系但以sourceIds追踪原文上屏文字可在授权范围内改写。两种模式下共同的底线是表示可以改变标签所指、连接方向、数值和结论强度保持有据。代码层面DeckData.ts 强制sourceIds与derivedFrom互斥且在 faithful 模式下带derivedFrom的补充图必须紧跟在引用同一来源的原文页之后faithful supplemental diagram must follow its source。原生 chart四种 kind 的数据契约原生 chart 使用如下 JSON 形态源自 ChartSpec.md{role:chart,sourceIds:[SRC-001],chart:{kind:compare,title:两种工作,items:[{label:生成,text:形成候选},{label:验证,text:检查依据}]}}四种图表类型kind数据形态数量范围核心规则bar2–6 个{label,value}2–6共用零基线和源单位可有负值全零保留零点line2–6 个{label,x,value}2–6x 严格递增、间距真实纵轴含零直线连接原始点不补点、平滑或外推flow2–4 个{label,text?}2–4只表示源文明示的先后竖屏纵排compare两个{label,text}固定 2共享维度和基线竖屏按源顺序这些数量范围在 DeckData.ts 中逐一实现compare限定[2,2]恰好两个条目、flow限定[2,4]、bar/line限定[2,6]超出即报chart item count错误。注意flow的text是可选的——如果源文只明示了先后顺序而没有说明文字可以不写。公共字段与数值约束公共字段非空title、非空items、可选note最多一个 item 使用emphasis:true。附加字段bar/line可带unit单位line可带xLabel/yLabel。数值纪律数值必须有限finite不能用字符串、null 或补零代表缺失数字与标签保持源顺序。这些约束在 DeckData.ts 中有精确对应chart 只允许kind/title/items/note以及bar/line的unit、line的xLabel/yLabel字段bar/line的每个 item 必须通过Number.isFinite(x.value)line的 x 必须严格递增x.xc.items[j-1].x即报错compare的每个 item 必须有非空text最多一个 item 使用emphasis:true。也就是说纵轴含零、x 严格递增、数值有限不是渲染器的自觉而是构建入口的数据契约写错数据根本无法通过 BuildDeck.ts 的校验。一个可运行的 compare 样例CompositionDeck.json 中的对照页是完整可复现的{ role: chart, chart: { kind: compare, title: 两件不同的工作, items: [ {label: 生成, text: 给出候选结果}, {label: 验证, text: 让结果遇到现实} ] }, notes: 比较共享一条问题轴。没有第三层总结句避免重复主张。, sourceIds: [SRC-003] }对照样张如下。两个条目共享起点与维度以位置和距离表达差异不加第三个总结块也不重复页面主张——这正是 compare 的构图语义。Unicode 关系图结构化 diagram 契约当关系是回路、分支或非线性节点关系时使用结构化 diagram。它不是把字符画进字符串而是声明节点、边与布局锚点由渲染层用 Unicode 连接线绘制。完整契约形态源自 ChartSpec.md{ role: chart, headline: 反馈回到输入, sourceIds: [SRC-002], diagram: { columns: 25, rows: 7, nodes: [ {id: input, label: 输入, caption: x, col: 3, row: 1}, {id: result, label: 结果, caption: f(x), col: 20, row: 1} ], edges: [ {from: input, to: result}, {from: result, to: input, via: [[20,5],[3,5]], label: 反馈, at: [12,5]} ] } }节点规则节点按id连接label使用自然文字中文按自然字距排版caption是就近的可选释义如变量名x、f(x)。col/row只是布局锚点不是数据值节点的位置语义完全由 edges 的方向表达。节点不强制加框。DeckData.ts 对网格有硬性校验columns必须为 3–60 的整数、rows为 2–20 的整数节点id非空且唯一label必填非空节点不能共享同一个锚点nodes cannot share an anchor且 col/row 必须落在网格内node outside diagram grid。边规则edges的from/to决定语义方向箭头按此方向绘制必须连接两个不同的已存在节点。via指定路径拐点网格坐标数组未对齐的相邻点以「先水平、再垂直」的直角路径连接。label标注过程本身如「反馈」at可指定标签位置。共享路径形成交点时在目标前的可见位置绘制箭头。校验端要求via与at的每个点都是网格内的整数坐标对route point outside grid/edge label outside grid。连接字符集与文字分层连接层使用等宽网格字符─ │ ┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ → ← ↑ ↓。文字与线条分层绘制节点保持自然中文字距遮让线条不把中文拉到两个字符单元这与 DesignSystem.md 中「中文标签保持自然字距按词组和节点定位普通文字不模拟终端字符阵列」一致对应 SKILL.md 的 GotchasUnicode 连接线使用等宽网格中文节点独立排版。需要连续对比的图如同一流程在前后两页反复出现必须使用相同的 rows/columns、节点锚点和标签规格保证视觉上的可比性。一个带回路与分支的完整样例CompositionDeck.json 的关系页31×7 网格、四个节点、三条正向边加两条反馈边是 diagram 的完整范本其结构为输入(x) → 处理(f) → 结果(f(x)) → 评价(E)另有两条反馈边评价→输入via[[27,5],[3,5]]标签「反馈」置于[18,5]与评价→处理via[[27,5],[11,5]]。{ role: chart, headline: 让反馈改变下一轮, diagram: { columns: 31, rows: 7, nodes: [ {id: input, label: 输入, caption: x, col: 3, row: 1}, {id: process, label: 处理, caption: f, col: 11, row: 1}, {id: output, label: 结果, caption: f(x), col: 19, row: 1}, {id: evaluate, label: 评价, caption: E, col: 27, row: 1} ], edges: [ {from: input, to: process}, {from: process, to: output}, {from: output, to: evaluate}, {from: evaluate, to: input, via: [[27,5],[3,5]], label: 反馈, at: [18,5]}, {from: evaluate, to: process, via: [[27,5],[11,5]]} ] }, notes: 连接线由 Unicode 绘制。中文节点使用自然字距释义就近依附节点。回路返回输入与处理。, sourceIds: [SRC-004] }关系样张如下。注意检查箭头是否完整、回路是否闭合、线条是否穿过无关标签——这正是 ChartSpec 要求的浏览器验收重点。浏览器验收与可读性ChartSpec 给出明确的实测检查清单节点不重叠、回路闭合、箭头完整且方向正确、线段连续、标签和释义相邻。路由穿过无关节点时调整via或位置节点太多、说明太长时拆分语义不能靠小字处理。可读性基线来自 RenderingSpec.md以 1098×648 视口验证时图内关键标签与数值的最低有效字号为 26px复杂图保留标签尺寸并允许横向滚动普通 flow、compare 纵排。运行时的实际字号、边界与图形标签由 ProbeDeck.js 在浏览器中逐项核对fit只做最后微调小于 0.80 时必须重新分页或构图。边界一图一个主要关系图表契约的边界原则有三条见 ChartSpec.md 的「边界」一节一图一个主要关系chart/diagram 不与 lines/table/pre 混作多个主体。每页恰好一个主体的约束由 DeckData 的数据契约保证不许把图和表格并排堆成「多主体」页。信息完整性图题和辅助说明可以省但理解图所需的信息必须保留。能省略的是重复主张、装饰性外框不能省略的是方向、标签、数值与关键限定。Unicode 不是配额Unicode 是关系图的呈现方式不成为所有页面的配额或装饰。数据契约、浏览器测量和源文核对分别证明其覆盖的部分而「箭头是否有来源」仍需完整原文审计——结构合法 ≠ 关系真实这是图表契约区别于一般画图工具的关键立场。从契约到交付构建与验证闭环图表数据不是直接写进 HTML而是经过 BuildDeck.ts → ValidateDeck.ts → ProbeDeck.js 的验收层次详见 RenderingSpec.md 与 Workflows/Generate.mdBuildDeck校验输入契约dataErrors即覆盖上文所有 chart/diagram 规则并内嵌资源ValidateDeck从最终 HTML 反解析数据核对源内容、构建指纹与离线/零动效ProbeDeck在浏览器核对实际角色、主对象、字号、边界、图形标签与交互报告绑定同一 buildId。完整可运行的复现命令源自 CompositionReference.mdbun Tools/BuildDeck.ts References/CompositionDeck.json /tmp/composition-reference.html bun Tools/ValidateDeck.ts /tmp/composition-reference.html --json构建时先按 DesignSystem.md 的讲述功能选版式再按 ChartSpec.md 选载体chart/diagram 数据进入role:chart的页面主体与statement、evidence等其他角色共享同一套来源溯源sourceIds/derivedFrom。图表的「事实边界」由三处共同兜底数据契约保证结构合法浏览器测量保证画面成立源文审计保证箭头有出处——三者缺一不可静态 PASS 不等于画面成立图合法也不等于关系有据。赞分享【免费下载链接】ljg-skills项目地址https://gitcode.com/gh_mirrors/lj/ljg-skills点击查看免费下载相关推荐ljg-present RenderingSpec 4.8 深度解析从数据契约到单文件离线演讲的渲染与验收规范ljg present RenderingSpec 4.8 深度解析从数据契约到单文件离线演讲的渲染与验收规范 本篇技术指南以 ljg present 技能的ljg-present 构图参考解读五类语义版式与 JSON 驱动的可复现讲稿契约ljg present 构图参考解读五类语义版式与 JSON 驱动的可复现讲稿契约 导读 ljg present 是当前仓库中的一个演讲设计技能它以“语义角deer-flow 图表技能实战:generate_sankey_chart 桑基图工具的数据契约、参数详解与生成链路deer flow 图表技能实战:generate_sankey_chart 桑基图工具的数据契约、参数详解与生成链路 本篇技术指南围绕 deer flow 仓人工智能大模型AI Agent自主智能体工具调用MCP 服务Agent 沙箱AI 技能后端前端上一篇Parcel 零配置构建工具完全指南从快速上手到源码级原理剖析下一篇Hugo Content Adapters内容适配器完全指南用 _content.gotmpl 动态生成页面与资源创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考