---
doc_id: wYJOstZIrweF
description: "展示在 MyST Markdown 里嵌入 mermaid 图、SVG 文件和内联 SVG。是一篇画图功能的演示文档。"
tags: [sphinx, mermaid, svg]
---

# mermaid 和 SVG

## mermaid

直接写 ```` ```mermaid ```` 代码块 (不要写 ```` ```{mermaid} ````)。`myst_fence_as_directive = ["mermaid"]` 让同一个代码块在 PyCharm / GitHub 预览里能显示, 在 Sphinx 构建时也能被 sphinxcontrib-mermaid 渲染。

```mermaid
flowchart LR
    A[写 README.md] --> B[git push]
    B --> C[GitHub Actions]
    C --> D[sphinx-build]
    D --> E[Cloudflare Pages]
    E --> F[浏览器]
    E --> G[AI agent]
```

### 时序图

```mermaid
sequenceDiagram
    participant Agent
    participant KB as kb.sanhe.me
    Agent->>KB: GET /llms.txt
    KB-->>Agent: 文档列表 (源文件链接)
    Agent->>KB: GET /p/<doc_id>.md
    KB-->>Agent: 302 到 /_sources/.../README.md
```

## SVG 文件

SVG 文件和文档放在同一个文件夹里, 用普通的 Markdown 图片语法引用, GitHub 上也能显示:

![architecture](architecture.svg)

## 内联 SVG

SVG 代码直接写在 Markdown 里, 作为 raw HTML 原样输出:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" width="200" height="60">
  <circle cx="30" cy="30" r="24" fill="#e91e63"/>
  <rect x="70" y="8" width="44" height="44" fill="#3f51b5"/>
  <polygon points="150,6 176,54 124,54" fill="#009688"/>
</svg>