站点架构可视化实战：marketingskills 的 7 套 Mermaid 站点地图模板

• AI 技能
• 人工智能

本指南围绕开源仓库 GitHub_Trending/mar/marketingskills 中 site-architecture 技能 的核心参考资料 mermaid-templates.md 展开，系统讲解如何用 Mermaid 语法绘制可视化站点地图（Visual Sitemap）。你将获得 7 套可直接复制运行的模板，覆盖基础层级、导航分区、URL 标注、Hub-and-Spoke 内容模型、内部链接流向、重构前后对比与颜色编码约定，并学会将其融入页面层级设计、URL 规划与内部链接策略的完整工作流，适用于 AI Agent 与人工共同产出可交付给设计团队的信息架构方案。

Mermaid 与 ASCII 树：何时该用可视化站点地图

在动手画图之前，先明确一个工具选择问题。site-architecture 技能（SKILL.md）同时维护了两套表达层级的方式：

• ASCII 树：适合快速草稿层级、纯文本上下文（如终端、聊天窗口）以及结构简单的站点；
• Mermaid：适合可视化演示、表达复杂关系、标注导航分区（Header / Footer / Sidebar）或内部链接模式。

当你要把信息架构方案分享给设计团队做导航与线框参考时，Mermaid 是首选。该技能自带的评估用例（evals/evals.json 中的 eval 5）就明确要求产出"能被大多数工具渲染的 Mermaid 图"，并将其作为与设计团队协作的标准交付物。

下面的 7 套模板全部来自 mermaid-templates.md，可直接复制、修改节点名称与连接关系后使用。

模板一：基础层级（Basic Hierarchy）

最简单的自顶向下页面层级，适合在规划早期快速建立全局认知：

要点拆解：

• graph TD（top-down）声明自顶向下绘制方向，与浏览器用户"从上往下浏览"的心智模型一致；
• 节点用ID["标签"]形式：ID是节点唯一标识（如HOME、FEAT），"标签"是显示文本；
• 标签内的<br/>是 Mermaid 支持的 HTML 换行，用来把"页面名"和"URL 路径"分两行展示；
• -->表示父子关系：被指向的节点在层级上是子页面。

这套模板对应 SKILL.md 中的"层级级别"（Hierarchy Levels）模型：/是 L0，/features是 L1 一级栏目，/features/analytics是 L2 栏目页，再往下的详情页则是 L3+。画图时建议为每个节点标注其所在的层级级别，便于检查是否有页面被埋得太深——SKILL.md 的"3 次点击规则"提醒我们：任何重要页面都应当能在 3 次点击内从首页到达，如果关键页面深埋在 4 层以上，就该考虑扁平化。

模板二：带导航区域的层级（Hierarchy with Navigation Zones）

利用subgraph子图把页面按"出现在哪个导航区域"分组，直观呈现 Header、功能页、Footer 各自承载的页面：

实战价值在于它把两件事合并在了一张图上：

1. 层级关系——HOME --> FEAT --> F1表达页面归属；
2. 导航位置——subgraph表达每个节点出现在哪块导航里。

这与 SKILL.md 的导航设计规则相互印证：Header 主导航最多4–7 项（超过会引发决策瘫痪），CTA 按钮（如Get Started ★）永远放在最右侧，Logo 在左侧链接回首页，导航项按访问优先级排序。该技能还补充了 Footer 的分栏组织方式（Product / Resources / Company / Legal 四栏）与侧边栏、面包屑等其他导航类型，完整模式可参考 navigation-patterns.md。

模板三：带 URL 标签的层级（Hierarchy with URL Labels）

每个节点同时展示页面名与 URL 路径，用<small>把 URL 渲染成较小字号，区分层级信息：

这张图最适合在确定 URL 结构阶段使用。SKILL.md 给出了配套的 URL 设计原则，画图时应逐条核对：

1. 人类可读——/features/analytics而不是/f/a123；
2. 连字符而非下划线——/blog/seo-guide而不是/blog/seo_guide；
3. URL 反映层级——路径应与站点结构一致；
4. 统一尾部斜杠策略；
5. 一律小写——/About应 301 到/about；
6. 短而具描述性——/blog/how-to-improve-landing-page-conversion-rates太长，/blog/landing-page-conversions更优。

同时 SKILL.md 提供了一张按页面类型划分的 URL 模式表（Feature 页/features/{name}、博客/blog/{slug}、文档/docs/{section}/{page}、对比页/compare/{competitor}等），可以与模板三组合成完整的"URL 地图表"交付物。完整的六大站点类型（SaaS、内容站、电商、文档站、混合站、小企业站）的层级与 URL 模板见 site-type-templates.md。

模板四：Hub-and-Spoke 内容模型（Hub-and-Spoke Content Model）

面向内容密集型站点的经典模型：一个 Hub 枢纽页连接多个 Spoke 分支文章，Spoke 之间再互相链接：

图例说明：

• 实线（-->）＝ Hub 与 Spoke 之间的主链接；
• 虚线（-.->）＝ Spoke 之间的交叉链接（cross-links）；
• style HUB fill:#f9f,...通过粉色填充 + 加粗描边让 Hub 枢纽页在视觉上脱颖而出。

这个模型与 SKILL.md 的内部链接策略直接对应。SKILL.md 定义的四种链接类型中，Hub-and-Spoke正是"把集群内容连接到枢纽页"：每个 Spoke 都要链接回 Hub，Hub 链接到所有 Spoke，Spoke 之间按相关性互相链接。典型的落地形态如下：

Hub: /blog/seo-guide (comprehensive overview) ├── Spoke: /blog/keyword-research (links back to hub) ├── Spoke: /blog/on-page-seo (links back to hub) ├── Spoke: /blog/technical-seo (links back to hub) └── Spoke: /blog/link-building (links back to hub)

该技能的内链规则还包括：不允许孤立页（每个页面至少有一条入站内链）、锚文本要具描述性（不要用 "click here"）、每 1000 字内容约 5–10 条内链、重要页面（首页、关键功能页、定价页）获得更多内链、全站实现面包屑、文章底部提供相关内容区。

模板五：内部链接流向（Internal Linking Flow）

用graph LR（left-right 从左到右）展示不同站点区块之间的交叉链接，配合子图把站点划分为 Marketing / Content / Product 三大区域：

这张图表达的正是 SKILL.md 中的跨区块链接（Cross-section）：功能页链接到相关案例研究、博客链接到产品页等。图的布局方式（graph LR）适合宽度较大的信息架构方案，与模板一、二的graph TD形成互补——同一套节点关系可以根据展示场景在两种方向间切换。

SKILL.md 给出的内链审计清单可以作为画完这张图之后的验证步骤：

• 每个页面至少有一条入站内链
• 没有 404 的失效内链
• 锚文本具描述性（不是 "click here" 或 "read more"）
• 重要页面拥有最多的入站内链
• 所有页面都实现了面包屑
• 博客文章存在相关内容链接
• 跨区块链接连接功能页与案例研究、博客与产品页

模板六：重构前后对比（Before/After Restructuring）

把"当前结构"和"建议结构"放在同一张图的左右两个子图里并排对比：

一个关键的 Mermaid 工程细节：由于两个子图处于同一张图中，节点 ID 必须全局唯一，所以"Before"子图统一加B_前缀、"After"子图统一加A_前缀，避免 ID 冲突导致渲染错误。

这张模板对应站点重构场景——evals/evals.json 中的 eval 2 描述了典型的"导航混乱、50+ 页面、用户找不到内容"的存量站点重构需求，其期望输出正是：先做内容清单（content inventory），再应用 3 次点击规则与扁平/深度权衡重组页面，给出Before/After 结构图，并处理被移动页面的 301 重定向。从图例可以直观看到，Before 侧是"首页直挂 8 个子页"的扁平失序结构，After 侧收敛为 Features / Resources / Company 三个二级栏目，每个栏目再挂子页，深度与可发现性达到平衡。

模板七：颜色编码约定（Color-Coding Conventions）

用节点样式区分页面状态、优先级或类型，适合评审会上快速标注"哪些要新建、哪些要删除、哪些保持不动"：

颜色图例：

• 绿色（#4CAF50）：现有页面，无需变更
• 蓝色（#2196F3）：需要新建的页面
• 红色（#f44336）：需要删除或重定向的页面
• 黄色（#FFC107）：需要重构或移动的页面
• 紫色（#9C27B0）：高优先级 / CTA 页面

注意style语句的写法：style 节点ID fill:颜色,color:#fff，其中color:#fff让节点文字反白以保证对比度。文档中给出了黄、紫两个约定的色值（#FFC107、#9C27B0），虽然示例代码只展示了绿蓝红三种用法，但在实际使用中可以用同样的style语法为"待重构"和"高优先级 CTA"节点上色——例如为定价页 CTA 使用紫色高亮。

把这 7 套模板放入 Agent 工作流

在 marketingskills 中，这些模板不是孤立的绘图素材，而是 site-architecture 技能完整交付链路的一部分。当用户（或 AI Agent）请求"规划/映射/重构网站层级、导航、URL 结构与内部链接"时，SKILL.md 会引导产出如下五类交付物，其中 Mermaid 图与其余四类相互印证：

1. 页面层级（ASCII 树）——每个节点带 URL 的完整站点结构，用 SKILL.md 规定的树形格式；
2. 可视化站点地图（Mermaid）——用graph TD配合子图标注导航分区，即本指南的模板一至模板六；
3. URL 地图表——页面 / URL / 父页面 / 导航位置 / 优先级五列，可与模板三配套使用；
4. 导航规格——Header 项（有序、含 CTA）、Footer 分区与链接、侧边栏、面包屑实现说明；
5. 内部链接计划——Hub 页及其 Spoke、跨区块链接机会、孤立页审计、关键页推荐链接数。

该技能的评估体系（evals.json）覆盖了典型触发场景，可以作为验证自己绘图能力的自测清单：

• 新建 SaaS 官网（eval 1）：期望产出含主页/功能页/定价/关于/博客 + 对比页与集成页的 ASCII 树与 Mermaid 图，并给出导航建议（4–7 个 Header 项）；
• 存量站点重构（eval 2）：期望先做内容清单、应用 3 次点击规则、给出 Before/After 结构图并处理 301 重定向；
• URL 结构争论（eval 3）：期望应用 URL 模式表，推荐更短更干净的路径，并给出完整 URL 地图；
• 程序化 SEO 扩展（eval 4）：新增 200 个集成页 + 50 个对比页时，期望用 Hub 页承载（/integrations、/compare）、套用 Hub-and-Spoke 内链模型、让程序化页面不占用主导航、并考虑爬取预算。

绘制规范与最佳实践小结

综合模板与 SKILL.md，总结一套可复用的绘制规范：

• 方向选择：默认graph TD自顶向下；跨区块链接流向分析（模板五）改用graph LR横向布局，宽屏展示更清晰；
• 子图命名：subgraph "Header Nav"加引号，避免空格或特殊字符导致解析问题；
• ID 管理：节点 ID 全图唯一，重构对比图中用B_/A_前缀区分前后两个阶段（模板六）；
• 标签换行：<br/>分行展示"页面名 + URL"，URL 可用<small>弱化视觉权重（模板三）；
• 线型语义：实线-->表示主结构链接，虚线-.->表示交叉/辅助链接（模板四）；
• 颜色语义：遵守绿/蓝/红/黄/紫五色约定，配合style 节点ID fill:色值,color:#fff统一反白文字（模板七）；
• 与文字工具互补：快速草稿用 ASCII 树（见 SKILL.md 的 ASCII Tree Format 章节），正式交付或跨团队评审用 Mermaid 图。

掌握这 7 套模板之后，你就能在数分钟内把任意站点的层级、导航、URL 与内链策略沉淀为可渲染、可评审、可交付的视觉资产——无论是新建站点的第一版 IA 草图，还是存量站点的重构提案，都能直接用这套"开箱即用"的 Mermaid 素材库完成。

• AI 技能
• 人工智能