企业官网建设流程全解析

架构图里也能用品牌图标：3个theSVG品牌图标集成Mermaid、Draw.io与Excalidraw的技巧

【免费下载链接】thesvg7,400+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg

theSVG 是一个开源的品牌 SVG 图标库，收录 7,400+ 个图标，涵盖品牌 Logo、AWS/Azure/GCP 云架构图标和 Kubernetes 图标。本文教你 3 个实用技巧，把 GitHub、AWS、Figma 等品牌图标放进Mermaid、Draw.io 和 Excalidraw的架构图中——无需设计基础，也不用到处找图标。

🏗️ 为什么架构图需要品牌图标

画系统架构图时的常见痛点：一堆矩形和圆角矩形，读者得对照图例才知道哪个是数据库、哪个是消息队列。品牌图标能瞬间传达信息——一个 Kubernetes 八边形比任何文字说明都直观。

theSVG 的场景契合度极高，除了 4,600+ 品牌 Logo，还内置了官方风格的云架构图标集，正好覆盖架构图里的常见节点：

全部为矢量 SVG，大图缩放不糊，小图放大清晰。

1️⃣ Mermaid：在代码式图里引用品牌图标

Mermaid 用文本描述架构，且支持给节点加图标。theSVG 已经同步到 Iconify，提供thesvg（单色）和thesvg-color（彩色）两套图标集——所有消费 Iconify 的工具都能引用，Mermaid 架构图就在其中（详见 README.md 的 Extensions 部分）。

三个落地思路，由简到繁：

1. 走 Iconify 引用：在 Mermaid 或配套编辑器插件中按图标集名引用，单色款（mono）和线条风图纸融合得最自然
2. 用 CDN 地址：theSVG 的图标地址规则是https://thesvg.org/icons/{slug}/{variant}.svg（slug 即品牌目录名，如github、aws-amazon-s3），支持图片节点的版本可直接粘贴
3. 本地文件：把 SVG 下载到与图文件同目录，相对路径引用，离线可用

💡 小技巧：flowchart / C4 风格图里，给服务节点挂上kubernetes、aws-amazon-s3这类图标，整张图"一眼识别技术栈"。

2️⃣ Draw.io：三步把品牌图标贴进画布

Draw.io（diagrams.net）对 SVG 的支持非常友好，操作路径有三条：

第一步：找到图标。在 theSVG 站点搜索目标品牌（如figma、postgresql），拿到该图标的 SVG 代码或 CDN 地址。

第二步：把图标搬上画布。任选一种：

• 复制 SVG 代码 → 在 Draw.io 里直接粘贴，会自动解析为矢量形状
• 菜单 Insert → Image → By URL，粘贴 theSVG 的 CDN 地址
• 本地 SVG 文件直接拖进画布

第三步：调整风格。想统一线条风就选mono变体；要品牌官方配色就用default变体。

想让图标批量进项目？一行 CLI 搞定：

npx @thesvg/cli add github

3️⃣ Excalidraw：白板上的品牌图标

协作白板 Excalidraw 同样直接支持 SVG：

• 拖入文件：把 theSVG 图标存为.svg（站点可一键下载，或用上面的 CLI），拖进画布即导入为矢量元素
• 复制粘贴：复制 SVG 代码后粘贴也能导入
• 导入后可缩放、旋转、分组，还能拆成可编辑的描边——手绘风和品牌图标混搭反而很有味道

💡 小技巧：Excalidraw 白底场景下，dark（黑色）或mono变体最干净；需要强调时再切彩色的default版，两种风格同一图标随意切换。

📦 变体选择速查

theSVG 每个图标最多提供 7 种变体，集成进图纸时按需选择：

default变体保证每个图标都有，其余按品牌实际情况挑选。

📂 项目路径速查

✅ 小结：三步完成"品牌图标进架构图"

1. 找图标：按品牌 slug 在 theSVG 搜到对应 SVG 或 CDN 地址
2. 选变体：彩色用default，线条风用mono，深色背景用light
3. 进工具：Mermaid 走 Iconify 引用或地址，Draw.io 直接粘贴/拖拽，Excalidraw 拖入即矢量

theSVG 完全开源免费，7,400+ 图标一次到位。品牌图标仍归各商标所有，对外发布时请遵守对应品牌的使用规范。

【免费下载链接】thesvg7,400+ brand SVG icons for developers. Tree-shakeable, typed, open source. npm i thesvg项目地址: https://gitcode.com/gh_mirrors/th/thesvg