Packet Diagram 实战指南用 Mermaidpacket-beta绘制网络协议头与二进制数据格式【免费下载链接】scientific-agent-skillsTurn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists worldwide. 165 ready-to-use validated skills plus 100 scientific databases covering biology, chemistry, medicine, and drug discovery. Compatible with Cursor, Claude Code, Codex, Pi, Antigravity, and the open Agent Skills standard.项目地址: https://gitcode.com/GitHub_Trending/cl/scientific-agent-skills本指南基于 packet.md 展开并结合 markdown-mermaid-writing 技能中的 Mermaid 风格指南、Markdown 风格指南 及示例报告 example-research-report.md 做源码级佐证。文中所有仓库内链接均以仓库根目录为起点。 导读在科学文档与工程文档中协议头、文件头、寄存器位图这类定宽二进制格式的说明是纯文字最难讲清楚的内容。本指南讲解 Mermaid 的packet-beta图Packet Diagram一种以位bit为最小单位、按行排布字段的文本式图解语法用于绘制网络协议报文头、数据结构布局与位级规范。读完本篇你将掌握packet-beta的完整语法规则、可访问性约束、TCP 头示例与可直接套用的模板并能将其嵌入 Markdown 文档成为以文本为唯一事实来源的科学文档工作流的一部分。 什么是 Packet Diagram何时使用scientific-agent-skills仓库中的 markdown-mermaid-writing 技能定义了 24 种 Mermaid 图类型的选用标准其中Packetpacket-beta的定位非常明确见 mermaid_style_guide.md项目说明语法关键字packet-beta最佳适用场景网络协议头、数据结构布局、二进制格式文档、位级bit-level规范不要用它表达通用数据模型改用 ER 图、系统架构改用 C4 图 或 Architecture 图选型的核心原则来自 mermaid_style_guide.mdPick the most specific type.Dont default to flowcharts — match your content to the diagram type that was designed for it.也就是说一旦你要描述的内容是定宽、按位偏移排布的二进制结构就应优先选择packet-beta而不是流程图或表格。这一点在 markdown_style_guide.md 的图类型速查表中同样被单列Binary protocol layout, data packet format → Packet diagram。 基础语法位区间、索引与行宽packet-beta的语法极其精简——每一行声明一个字段字段以位区间range描述。核心规则如下区间格式为start-end:以位为单位且从 0 开始索引0-indexed。例如0-15:表示占用第 0 到第 15 位共 16 位。字段标签必须用双引号包裹0-15: Source Port。行宽默认为 32 位字段长度累计超过 32 位时会自动换行到下一行无需手工分页。标签保持简洁如果字段名过长应缩写避免图面拥挤。从语法结构看packet-beta不需要声明节点 ID 或连线也不依赖accTitle/accDescr详见下文可访问性小节是 24 种图类型中上手成本最低的一类。 示例TCP 协议头下面直接继承 packet.md 中的完整示例——一个简化版 TCP 头字段大小以位为单位描述性的斜体段落本图展示简化版 TCP 头的字段结构与位宽分配从 0 位起始依次排列源端口、目的端口、序号、确认号、数据偏移、保留位、标志位、窗口大小、校验和与紧急指针。这个示例直观地体现了两个关键点位宽即语义TCP 头中Sequence Number占 32 位32-63:而Data Offset仅占 4 位96-99:——packet-beta让读者一眼看清每个字段在报文中的真实占用这正是位级规范文档最需要的表达能力。自动换行整张图共 160 位按 32 位行宽自动折成 5 行无需手工控制布局。Tippacket-beta不只适用于网络包。任何定宽二进制格式——例如自定义文件头、传感器数据帧、寄存器位图——都可以用它表达。♿ 可访问性为何必须在代码块上方加斜体描述这是packet-beta最重要的一条使用纪律。在 mermaid_style_guide.md 中明确列出Diagram types that do NOT supportaccTitle/accDescr:Mindmap, Timeline, Quadrant, Sankey, XY Chart, Block,Packet, Architecture, Radar, Treemap. For these, place a descriptiveitalicMarkdown paragraph directly above the code block as the accessible description.packet.md 同样以 ⚠️ 标注了这一点Accessibility:Packet diagrams donotsupportaccTitle/accDescr. Always place a descriptiveitalicMarkdown paragraph directly above the code block.因此正确写法是在每个packet-beta代码块上方紧贴一行斜体italic描述段落说明该图展示的内容与读者应获得的信息。例如上面 TCP 示例前的那段斜体说明即为此用途。这是屏幕阅读器与 AI Agent 理解该图的唯一文本通道不可省略。对照之下支持accTitle/accDescr的图类型如 ER 图 中的erDiagram则要求在代码块内声明packet-beta用户务必记住这一差异避免复制了别的图类型模板却在 packet 里写 accTitle导致无法渲染或注解失效。 模板直接复制可用packet.md 提供了开箱即用的模板。使用前请将第一行斜体描述替换为对你协议/格式的实际说明待绘制的协议或数据格式及其字段结构的描述该模板演示了几种常见位宽粒度1 字节字段0-7:、8-15:、2 字节字段16-31:与 4 字节字段32-63:覆盖了绝大多数二进制格式的最小组成单元。 Tips 速查表综合 packet.md 的 Tips 小节整理为可直接执行的清单#规则说明1位区间 0 起始范围格式为start-end:按位计数从 0 开始2标签尽量短字段名过长时缩写保证图面整洁3不限于网络包任何定宽二进制格式都可使用4行宽默认 32 位字段超宽自动换行无需手工分页5务必配对文字描述代码块上方加斜体段落供屏幕阅读器使用 与风格指南的强制规范对齐scientific-agent-skills中的 markdown-mermaid-writing 要求每张 Mermaid 图遵循 mermaid_style_guide.md 的六条核心原则清晰分层、始终可访问、主题中立、语义清晰、风格一致、克制修饰。对packet-beta而言需要特别注意与图内文本相关的三条主题中立不使用%%{init}主题指令不使用内联style让 GitHub 自动适配明暗两种主题dark mode 下classDef必须包含color:文本色。语义清晰字段标签使用主动语态与句子式大小写字段 ID 若需要区分层级可参考snake_case惯例packet-beta本身以行定义字段天然契合这一要求。克制修饰每节点最多一个 emoji位于标签开头且 emoji 语义在全项目内保持一致禁止 等装饰性 emoji。此外markdown_style_guide.md 规定文档中每个 H2 标题最多一个 emojiH1 仅一个图应内联放置在相关文字旁边而不是集中到独立的插图章节。这些规则共同保证了包含packet-beta的文档在 GitHub 明暗双主题下都干净、可读、可被无障碍工具解析。 在科学文档工作流中的位置packet-beta并非孤立工具它属于 markdown-mermaid-writing 定义的三阶段文档工作流的 Phase 1Phase 1强制用 Markdown 内嵌 Mermaid 记录一切结构关系——这是唯一事实来源source of truthPhase 2可选需要真实数据图表时才用 Pythonmatplotlib 等生成Phase 3可选需要出版级视觉时才用 AI 图像生成润色。也就是说一个网络协议或文件格式的结构说明首先应该以packet-beta文本图的形式提交进 git可 diff、无需构建步骤、GitHub/GitLab/Notion 原生渲染、Agent 无需视觉即可解析后续如需精美配图再另行转换但文本版始终保留为权威来源。这与 SKILL.md 中的核心观点一致a relationship expressed as a Mermaid diagram inside a .md file is more valuable than any image。✅ 输出前自检清单在把包含packet-beta的文档提交之前对照 mermaid_style_guide.md 的质量清单逐项核验代码块上方存在斜体描述段落替代accTitle/accDescr位区间 0 起始、格式为start-end:字段标签简短、双引号包裹无%%{init}指令、无内联style未使用装饰性 emoji若用 emoji 则每节点至多一个且置于标签开头在 GitHub 明/暗两种主题下均可正常渲染图内联放置在相关文字旁边而非集中存放 延伸阅读markdown-mermaid-writing/SKILL.md — 技能总览24 种图类型、9 种文档模板与三阶段工作流Mermaid 风格指南 — 可访问性、emoji 集、色彩类、图类型选型表Markdown 风格指南 — 标题层级、脚注引用、表格与图集成规范ER 图参考 — 数据模型场景下packet-beta的替代方案C4 图参考 与 Architecture 图参考 — 系统架构场景下的替代方案示例科研报告 — 完整演示了流程图、时序图、甘特图、雷达图与表格、脚注、折叠区的组合用法可作为编排多图文档的范本【免费下载链接】scientific-agent-skillsTurn any AI agent into an AI Scientist. The #1 Agent Skills library for science, used by 190,000 scientists worldwide. 165 ready-to-use validated skills plus 100 scientific databases covering biology, chemistry, medicine, and drug discovery. Compatible with Cursor, Claude Code, Codex, Pi, Antigravity, and the open Agent Skills standard.项目地址: https://gitcode.com/GitHub_Trending/cl/scientific-agent-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考