Mermaid 模板库 + SVG 导出手册（含 Sitemap）

本手册整合 Mermaid 流程图模板（竖版/横版/框架图/接地图）和 SVG 导出完整工作流（Obsidian + VS Code 双链路），并附带 Sitemap 创建方法。适合需要在 Obsidian 中绘制流程图并导出为 SVG 嵌入 HTML 的场景。

第一部分：Mermaid 流程图模板库

模板概览

模板名称	布局方向	核心特性	适用场景
竖版组织架构图	`flowchart TB`	圆角样式，自上而下	公司层级、部门结构
横版组织架构图	`flowchart LR`	圆角样式，自左向右	流程角色、横向协作
框架分组图	`flowchart TB`	subgraph 分组 + 浮动备注	系统架构、模块划分
接地电路图	`flowchart TD/LR`	subgraph 分组 + 虚实线混合	技术文档、电路原理

模板1：竖版组织架构图

用途： 公司层级结构、部门隶属关系展示
布局： 从上到下（TB）
特点： 圆角深色节点，层级清晰

```mermaid
flowchart TB
    %% 定义圆角样式
    classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666666,color:#ffffff

    CEO(董事长、总经理):::roundBox
    Tech(执行总监):::roundBox
    Admin(行政副总):::roundBox
    Front(技术副总):::roundBox
    Back(总经理助理):::roundBox

    %% 直角连线
    CEO --> Tech
    Tech --> Admin
    Tech --> Front
    Tech --> Back
```

产出效果图： sb.jpg（竖版）

模板2：横版组织架构图

用途： 流程角色分布、横向协作关系展示
布局： 从左到右（LR）
特点： 圆角深色节点，横向展开

```mermaid
flowchart LR
    %% 定义圆角样式
    classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666666,color:#ffffff

    CEO(董事长、总经理):::roundBox
    Tech(执行总监):::roundBox
    Admin(行政副总):::roundBox
    Front(技术副总):::roundBox
    Back(总经理助理):::roundBox

    %% 直角连线
    CEO --> Tech
    Tech --> Admin
    Tech --> Front
    Tech --> Back
```

产出效果图： hb.jpg（横版）

模板3：框架分组图（含 subgraph 和浮动备注）

用途： 系统架构、模块划分、团队分组展示
布局： 从上到下（TB）
特点： subgraph 分组框 + 浮动备注节点 + 虚实线混合

```mermaid
flowchart TB
    classDef roundBox rounded:true,fill:#2a2a2a,stroke:#666666,color:#ffffff
    classDef floatText fill:none,stroke:none

    CEO(董事长、总经理):::roundBox

    subgraph 执行管理团队
        Tech(执行总监):::roundBox
        Admin(行政副总):::roundBox
        Front(技术副总):::roundBox
        Back(总经理助理):::roundBox
    end

    CEO --> Tech
    Tech --> Admin
    Tech --> Front
    CEO --> Back

    note_right\["向董事长汇报"]:::floatText
    note_bottom\["会商、批准、执行"]:::floatText

    note_right -.-> Tech
    note_bottom -.-> Tech
```

产出效果图： hb+.jpg（框架图）

模板4：适配器接地电路图

用途： 技术文档、电路原理、信号流向展示
布局： 从上到下（TD） + 从左到右（LR）双图
特点： subgraph 分组 + 虚实线混合 + 多层级标注

```mermaid
flowchart TD
    subgraph AC["🔥 AC 220V 输入侧"]
        L["AC220V L"]
        N["AC220V N"]
        PE["PE（保护地）"]
    end

    subgraph ADAPTER["🔌 适配器内部"]
        Yc1["Yc1"]
        Yc2["Yc2"]
        Shell["适配器外壳/屏蔽/机壳"]
    end

    subgraph SECONDARY["⚡ 适配器次级"]
        V19["+19.5V"]
        GND["GND（主板地）"]
        Riso["极高阻绝缘 Riso ≈ ∞"]
        Case["笔记本机壳"]
    end

    L --- Yc1
    Yc1 --- Shell
    N --- Yc2
    Yc2 --- Shell

    PE --> Socket["插座地"]
    Socket --> Building["大楼地（大地 0V）"]

    GND --> Riso
    Riso --> Case

    Shell -.->|"连接至"| Case
```

简化版（LR 布局）：

```mermaid
flowchart LR
    L["AC220V L"] --> Yc1["Yc1"] --> Shell["适配器外壳/DC线屏蔽/笔记本机壳"]
    N["AC220V N"] --> Yc2["Yc2"] --> Shell
    PE["PE（保护地）"] --> Socket["插座地"] --> Earth["大楼地（大地 0V）"]

    subgraph DC["次级侧"]
        V19["+19.5V"]
        GND["GND（主板地）"] --> Riso["极高阻绝缘 Riso ≈ ∞"] --> Case["机壳"]
    end

    Shell -.-> Case
```

模板5：三色状态业务流程图

用途： 业务流程、状态流转、分支判断
布局： 从左到右（LR）
特点： 三色标准配色（成功绿 / 警告黄 / 错误红）

```mermaid
flowchart LR
    %% 样式定义必须放在 flowchart 最前面
    classDef okStyle fill:#d5e8d4,stroke:#288828,stroke-width:1px
    classDef warnStyle fill:#fff2cc,stroke:#ee9900,stroke-width:1px
    classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke-width:2px

    start(开始) --> judge{条件判断}
    judge --是--> ok[执行成功]:::okStyle
    judge --否--> no[发生异常]:::errorStyle
    judge --超时--> warn[注意风险]:::warnStyle
```

第二部分：SVG 导出完整工作流

工作流总览

步骤	操作	工具
1. 编辑源文件	新建/编辑 `.mmd` 文件	VS Code / Obsidian
2. 导出 SVG	生成 `.svg` 磁盘文件	VS Code Mermaid-Editor（稳定首选）
3. 嵌入 HTML	内联或外部引用	记事本 / VS Code
4. （备选）Obsidian 导出	实时预览 → 右键导出	Obsidian 阅读模式

链路一：VS Code + Mermaid-Editor（✅ 稳定首选）

环境要求： VS Code + 插件 Mermaid-Editor（作者 tomoyukim）
⚠️ 不要使用 Markdown Preview Mermaid Support，该插件不能导出 SVG

步骤1：创建 `.mmd` 源文件

在 VS Code 中新建文件，保存为 流程图示例.mmd
文件内只写 Mermaid 源码，不要 ```mermaid 标记

示例代码：

%%{init: {'flowchart':{'wrappingWidth':180}}}%%
flowchart LR
    A[盒子A] -->|测试| B[盒B]
    subgraph G["分组盒子"]
        C[内部节点]
    end

步骤2：生成 SVG 磁盘文件

激活 .mmd 文件编辑窗口（点击该文件）
按 Ctrl+Shift+P 打开命令面板
输入 Mermaid: Generate SVG File，回车
当前目录自动输出同名 .svg 文件（如 流程图示例.svg）

步骤3：获取 SVG 源码用于嵌入 HTML

右键 .svg 文件 →「打开方式」→「记事本」
Ctrl+A 全选 → Ctrl+C 复制全部文本
粘贴进 HTML 的 <body> 内部

最小测试 HTML 模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>svg { max-width: 100%; }</style>
</head>
<body>
    <!-- 粘贴 SVG 全部源码在这里 -->
</body>
</html>

步骤4：同步更新 `.md` 预览文件

# 流程图示例

```mermaid
%%{init: {'flowchart':{'wrappingWidth':180}}}%%
flowchart LR
    A[盒子A] -->|测试| B[盒B]
    subgraph G["分组盒子"]
        C[内部节点]
    end
```

说明： .md 文件仅用于 Obsidian 预览查看，不能直接导出 SVG。修改图表优先修改 .mmd，生成 SVG 后再同步更新 .md。

链路二：Obsidian 原生导出（⚠️ 不稳定备选）

适用场景： VS Code 不可用时，单次少量图表导出
优势： 全程在 Obsidian 内操作，无需命令行
劣势： 导出功能经常失效，布局渲染与 VS Code 有差异

步骤1：创建独立 `.mmd` 源文件

在 Obsidian 库中新建文件，命名 流程图示例.mmd，后缀必须为 .mmd
在文件内写入完整 Mermaid 代码，支持头部 %%{init} 配置

步骤2：复制源码

打开 流程图示例.mmd
切换至「编辑模式」，全选复制所有文本（包含头部 %%{init} 配置）

步骤3：新建临时 Markdown 笔记

新建普通笔记，命名 临时导出载体.md
粘贴模板，将复制源码放入 ```mermaid 代码块内：

```mermaid
%% 此处粘贴从 .mmd 文件复制的全部代码
%%{init: {
    'flowchart': {
        'wrappingWidth': 180
    },
    'theme':'dark'
}}%%
flowchart TD
    A[开始] --> B{是否满足条件}
```

步骤4：导出 SVG

切换 Obsidian 视图为「实时预览」
鼠标移动到流程图图形区域
图表右上角出现「⋮」更多菜单按钮，点击
选择「导出 SVG」，浏览器弹出保存窗口完成导出

重要限制与注意事项

序号	注意事项
1	布局差异风险：Obsidian 对部分 `%%{init}` 参数支持有限，若布局偏移，用 https://mermaid.live/ 校验
2	临时文件：导出完成后，`临时导出载体.md` 可直接删除；唯一源文件永远保留 `.mmd` 文件
3	批量不推荐：超过 5 张图，优先使用 VS Code Mermaid-Editor 或 `mmdc` 命令行批量脚本
4	兜底方案：原生代码块导出异常时，复制源码到 https://mermaid.live/ → Export → Download SVG

SVG 嵌入 HTML：两种方案

方案A：内联 SVG（推荐流程图使用）

写法：

<div class="flowchart">
    <svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
        <!-- 把你导出的整个 SVG 全部源码粘贴在这里 -->
    </svg>
</div>

优点：

单一 HTML 文件独立完整，无需附带 SVG 附件
支持 CSS 直接修改线条、文字、填充颜色
不会出现图片加载失败、路径错误
支持页面内 JS 动态操作图形节点

缺点：

HTML 体积变大；多个大图时代码臃肿

方案B：外部链接 SVG 文件

img 标签（最简单）：

<img src="11.svg" alt="流程图">

object 标签（推荐，保留 SVG 交互能力）：

<object data="11.svg" type="image/svg+xml" width="800"></object>

关键短板：

必须维护文件相对路径，移动文件夹容易失效
<img> 引入的 SVG，外部 CSS 无法修改 SVG 内部样式
不适合单文件 HTML 归档场景

场景选择建议

场景	推荐方案
单文件 HTML 交付/归档	✅ 内联 SVG，粘贴完整源码
网站长期维护，图标复用	✅ `<object>` 外部引用
多图大项目	✅ 内联 + 按需加载

文件分工规范

文件类型	用途	说明
`.mmd`	编辑 + 导出 SVG 的源文件	纯 Mermaid 源码，不含 ```mermaid 标记，优先编辑此文件
`.md`	阅读 + Obsidian 预览	含代码块 + 图表的完整文档；不作为导出源
`.svg`	HTML 嵌入的矢量图	由 `.mmd` 导出生成，可单独管理或内联嵌入

第三部分：Sitemap 创建方法

Sitemap（站点地图）是告诉搜索引擎网站页面结构的 XML 文件，有助于提升收录效率。

方法一：手动编写 sitemap.xml

基础模板：

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>https://www.你的域名.com/</loc>
        <lastmod>2026-08-11</lastmod>
        <changefreq>daily</changefreq>
        <priority>1.0</priority>
    </url>
    <url>
        <loc>https://www.你的域名.com/page1.html</loc>
        <lastmod>2026-08-10</lastmod>
        <changefreq>weekly</changefreq>
        <priority>0.8</priority>
    </url>
</urlset>

字段说明：

字段	说明	可选值
`loc`	页面完整 URL（必填）	完整链接地址
`lastmod`	最后修改日期	YYYY-MM-DD
`changefreq`	更新频率	always / hourly / daily / weekly / monthly / yearly / never
`priority`	优先级（0.0 ~ 1.0）	首页 1.0，内页 0.8 以下

方法二：工具自动生成

工具	适用场景	地址
sitemap-generator	NPM 工具，命令行生成	`npm install -g sitemap-generator`
XML-Sitemaps	在线生成，适合小站	https://www.xml-sitemaps.com/
Screaming Frog	SEO 爬虫工具，可导出 sitemap	https://www.screamingfrog.co.uk/
Next.js (next-sitemap)	Next.js 项目自动生成	`npm install next-sitemap`

方法三：提交到搜索引擎

搜索引擎	提交入口	验证方式
百度	https://ziyuan.baidu.com/linksubmit/url	百度站长平台验证
Bing	https://www.bing.com/webmasters/sitemaps	Bing Webmaster Tools
Google	https://search.google.com/search-console/sitemaps	Google Search Console

提交格式：

https://www.你的域名.com/sitemap.xml

Sitemap 最佳实践

文件大小不超过 50MB，超过则拆分为多个 sitemap 文件
使用 sitemap 索引文件 管理多个子 sitemap：

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
        <loc>https://www.你的域名.com/sitemap-pages.xml</loc>
        <lastmod>2026-08-11</lastmod>
    </sitemap>
    <sitemap>
        <loc>https://www.你的域名.com/sitemap-posts.xml</loc>
        <lastmod>2026-08-11</lastmod>
    </sitemap>
</sitemapindex>

定期更新：网站新增页面后及时更新 sitemap
放在网站根目录：如 https://www.你的域名.com/sitemap.xml
在 robots.txt 中声明：

Sitemap: https://www.你的域名.com/sitemap.xml

Sitemap实操20260811

sitemap.html 是我（AI）根据 tree.txt 的内容，手动整理成 HTML 结构后生成的。

也就是说：

tree /F → tree.txt → 你发给我 → 我整理成 sitemap.html → 你保存到本地

具体流程

你在 Windows 上运行 tree /F > tree.txt
你把 tree.txt 的内容贴给我
我根据 tree.txt 的文件列表，按照目录结构手动整理成 sitemap.html
你把 sitemap.html 保存到 C:\Users\niuch\Documents\8000\
然后运行 PowerShell 脚本，从 sitemap.html 生成 sitemap.xml

所以： tree.txt → sitemap.html 这步，是我（AI）在对话中帮你完成的，不是任何本地脚本。

修正后的工作流

Sitemap 完整工作流（Windows 全程）

适用场景：Windows 本地生成站点地图，tree.txt → AI 整理 sitemap.html → 自动生成 sitemap.xml 适用环境：Windows + PowerShell（无需安装额外软件）

第一步：生成 tree.txt（查看目录结构）

cd C:\Users\niuch\Documents\8000
tree /F | Select-String -Pattern "\.(html|md)$" -CaseSensitive:$false > tree.txt

作用： 列出所有 .html 和 .md 文件，方便查看当前目录结构，作为 AI 整理 sitemap.html 的参考。

第二步：AI 整理生成 sitemap.html

将 tree.txt 内容发送给 AI，AI 根据目录结构整理成 sitemap.html。

输出文件： C:\Users\niuch\Documents\8000\sitemap.html

第三步：生成 sitemap.xml（PowerShell 脚本）

cd C:\Users\niuch\Documents\8000

$domain = "http://ncg.linkpc.net:8000"
$html = Get-Content sitemap.html -Raw

$xml = '<?xml version="1.0" encoding="UTF-8"?>'
$xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'

$matches = [regex]::Matches($html, 'href="([^"]+)"')
foreach ($m in $matches) {
    $link = $m.Groups[1].Value
    if ($link -match '^#|^http|\.\./|sitemap|robots') { continue }
    if ($link -match '\.md$') {
        if ($link -match '^md-it\.html') {
            $url = "$domain/$link"
        } else {
            $clean = $link -replace '^\?file=', ''
            $url = "$domain/md-it.html?file=./$clean"
        }
    } else {
        $url = "$domain/$link"
    }
    $xml += "  <url><loc>$url</loc><lastmod>2026-08-10</lastmod><changefreq>monthly</changefreq><priority>0.6</priority></url>"
}

$xml += '</urlset>'
$xml | Out-File -Encoding UTF8 sitemap.xml

Write-Host "✅ 已生成 sitemap.xml，共 $($matches.Count) 个链接"

第四步：部署到 NAS

Copy-Item sitemap.html \\192.168.100.97\web\
Copy-Item sitemap.xml \\192.168.100.97\web\

第五步：验证

浏览器访问：

http://ncg.linkpc.net:8000/sitemap.html
http://ncg.linkpc.net:8000/sitemap.xml

完整工作流图示

┌─────────────────────────────────────────────────────────────────┐
│  Sitemap 完整工作流                                            │
│                                                                 │
│  Step 1: tree /F → tree.txt                                    │
│  ┌──────────────┐  PowerShell  │ ┌──────────────┐             │
│  │ 网站目录      │ ────────────→ │ tree.txt     │             │
│  └──────────────┘               │ └──────────────┘             │
│         ↓                                                      │
│  Step 2: tree.txt → AI → sitemap.html                         │
│  ┌──────────────┐              │ ┌──────────────┐             │
│  │ tree.txt     │ ──发给我──→ │ 我整理成      │             │
│  └──────────────┘              │ sitemap.html │             │
│         ↓                      │ └──────────────┘             │
│  Step 3: sitemap.html → sitemap.xml                           │
│  ┌──────────────┐  PowerShell  │ ┌──────────────┐             │
│  │ sitemap.html │ ────────────→ │ sitemap.xml  │             │
│  └──────────────┘   脚本提取    │ └──────────────┘             │
│         ↓                                                      │
│  Step 4: 部署到 NAS                                            │
│  ┌──────────────┐              │ ┌──────────────┐             │
│  │ sitemap.html │ ──复制──────→ │ NAS 根目录    │             │
│  │ sitemap.xml  │              │ │              │             │
│  └──────────────┘              │ └──────────────┘             │
└─────────────────────────────────────────────────────────────────┘

关键变量说明

变量	说明	示例
`$domain`	网站域名/IP	`http://ncg.linkpc.net:8000`
`<lastmod>`	最后修改日期	`2026-08-10`
`<changefreq>`	更新频率	`monthly`
`<priority>`	优先级（0.0-1.0）	`0.6`

目录排除规则

目录/文件	处理方式
`_vti_cnf/`	不收录（FrontPage 残留）
`simple/`、`s0/`	不收录（相册模板，无独立访问页）
`*.jpeg.html`	不收录（相册单图页）
`images/`、`css/`	不收录（资源目录）

图标规则

图标	含义	链接格式
📄	独立 HTML 页面	`http://域名/路径/xxx.html`
📝	Markdown 文件	`http://域名/md-it.html?file=./路径/xxx.md`

Bing 和百度的提交流程

一、提交到 Bing Webmaster Tools

Bing Webmaster Tools 对个人站长的支持很友好，操作起来也比较顺畅。

操作步骤：

注册并验证站点：
- 访问 Bing Webmaster Tools 官网，用你的 Microsoft 账号登录。
- 点击“添加站点”（Add a Site），输入你的网站网址，比如 http://ncg.linkpc.net:8000。
- 选择一种验证方式。最常见的是 Meta 标签验证（复制一段HTML代码到你的 sitemap.html 或首页的<head>标签里），或者文件验证（下载一个 BingSiteAuth.xml 文件，放到网站根目录）。验证通过后，站点状态会变为“已验证”。
提交 Sitemap：
- 在站点左侧菜单栏中，找到“Sitemap”（站点地图）部分。
- 点击页面右上角的“提交 Sitemap”（Submit sitemaps）按钮。
- 在弹出的输入框中，填写你 Sitemap 的完整 URL，即：http://ncg.linkpc.net:8000/sitemap.xml，然后点击提交。

补充方式： 你也可以在网站根目录的 robots.txt 文件中添加一行，让 Bing 自动发现你的 Sitemap，即使不登录站长平台也可以：

Sitemap: http://ncg.linkpc.net:8000/sitemap.xml

二、提交到百度搜索资源平台

百度搜索资源平台是管理网站在百度收录情况的主要入口。

操作步骤：

注册并验证站点：
- 访问百度搜索资源平台官网，用你的百度账号登录。
- 在“用户中心”找到“站点管理”，点击“添加网站”。
- 输入你的网站地址，并设置站点领域（根据网站内容选择合适的分类）。
- 选择一种验证方式（推荐文件验证或HTML标签验证）。这与 Bing 的流程类似，根据指引将验证文件上传到网站根目录，或把 Meta 标签添加到首页 head 部分即可完成验证。
提交 Sitemap：
- 在百度搜索资源平台的左侧菜单中，找到“链接提交”，然后选择“Sitemap”。
- 在输入框中填写你的 Sitemap 完整 URL，即：http://ncg.linkpc.net:8000/sitemap.xml，然后保存提交即可。

补充说明： 如果你的网站内容更新频繁，除了提交 Sitemap，还可以使用百度提供的“普通收录-API推送”功能，可以在你更新页面后，通过程序接口主动通知百度，实现更快速的收录。

手册更新建议

你可以将以下内容直接整理到你的 Mermaid 模板库 + SVG 导出手册（含 Sitemap） 中，作为新的“提交Sitemap”章节：

## 提交 Sitemap 到搜索引擎

### 提交到 Bing
1. 访问 [Bing Webmaster Tools](https://www.bing.com/webmasters/about) 并登录。
2. 添加并验证你的网站（支持Meta标签或文件验证）。
3. 在左侧菜单点击“Sitemap”，点击“提交 Sitemap”按钮，填写你的 Sitemap 地址并提交。

> 💡 备选方式：在网站根目录的 `robots.txt` 文件中添加 `Sitemap:` 指令，也可让 Bing 自动发现。

### 提交到百度
1. 访问 [百度搜索资源平台](https://ziyuan.baidu.com/) 并登录。
2. 在“站点管理”中添加并验证你的网站（支持文件或HTML标签验证）。
3. 在“链接提交” > “Sitemap”中，填写你的 Sitemap 地址并保存。

> 💡 主动推送：如果你希望新页面被更快收录，可以在“普通收录”中使用“API推送”功能，通过程序接口主动通知百度。

线型

表格

线型	语法	说明
普通实线	`---`	标准连线
粗实线	`===`	加粗强调
虚线	`-.-`	虚线 / 间接关系

端点样式（箭头 / 端头）

单向

表格

示例	语法
普通单向箭头	`A --> B`
粗单向箭头	`A ==> B`
虚线单向箭头	`A -.-> B`
圆形端头（不是三角箭头）	`A --o B`
叉号端头	`A --x B`

双向（双箭头 / 双端头）

表格

示例	语法
普通双向三角箭头	`A <--> B`
双向圆形端点	`A o--o B`
双向叉号端点	`A x--x B`

无箭头（纯连线，无方向）

表格

示例	语法
实线无箭头	`A --- B`
粗线无箭头	`A === B`
虚线无箭头	`A -.- B`

本文档整合自 Mermaid 流程图模板库、SVG 导出工作流（VS Code + Obsidian 双链路）、Sitemap 创建方法，适用于技术文档编写、网站开发和 SEO 优化场景。

牛春国个人主页