SVG图制作模板和说明

主要避坑

SVG图制作空格敏感，典型实践是AI给出的代码，要先粘贴在记事本，再考出来，在粘贴到md文件编辑器中。 代码头尾必须是如下格式：

最小完整示例（直接复制测试）

```mermaid
flowchart LR
    %%样式放最前面
    classDef okStyle fill:#d5e8d4,stroke:#288828,stroke‑width:1px
    classDef errorStyle fill:#ffcccc,stroke:#dd0000,stroke‑width:2px

    start(开始) --> judge{条件判断}
    judge --是--> ok[执行逻辑A]:::okStyle
    judge --否--> no[执行逻辑B]:::errorStyle
```

竖版图

竖版图

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

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

    %% 直角连线，flowchart默认自动直角布线
    CEO --> Tech
    Tech--> Admin
    Tech --> Front
    Tech --> Back

横版图

横版图

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

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

    %% 直角连线，flowchart默认自动直角布线
    CEO --> Tech
    Tech--> Admin
    Tech --> Front
    Tech --> Back

框架SVG图]

框架图

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