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

架构图里也能用品牌图标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/thesvgtheSVG 是一个开源的品牌 SVG 图标库收录 7,400 个图标涵盖品牌 Logo、AWS/Azure/GCP 云架构图标和 Kubernetes 图标。本文教你 3 个实用技巧把 GitHub、AWS、Figma 等品牌图标放进Mermaid、Draw.io 和 Excalidraw的架构图中——无需设计基础也不用到处找图标。️ 为什么架构图需要品牌图标画系统架构图时的常见痛点一堆矩形和圆角矩形读者得对照图例才知道哪个是数据库、哪个是消息队列。品牌图标能瞬间传达信息——一个 Kubernetes 八边形比任何文字说明都直观。theSVG 的场景契合度极高除了 4,600 品牌 Logo还内置了官方风格的云架构图标集正好覆盖架构图里的常见节点图标集合数量适用场景品牌图标4,600技术栈、第三方服务标注AWS 架构图标739AWS 服务/资源节点Azure 服务图标626Azure 架构图Google Cloud 图标214GCP 架构图Kubernetes 图标38K8s / CNCF 架构图全部为矢量 SVG大图缩放不糊小图放大清晰。1️⃣ Mermaid在代码式图里引用品牌图标Mermaid 用文本描述架构且支持给节点加图标。theSVG 已经同步到 Iconify提供thesvg单色和thesvg-color彩色两套图标集——所有消费 Iconify 的工具都能引用Mermaid 架构图就在其中详见 README.md 的 Extensions 部分。三个落地思路由简到繁走 Iconify 引用在 Mermaid 或配套编辑器插件中按图标集名引用单色款mono和线条风图纸融合得最自然用 CDN 地址theSVG 的图标地址规则是https://thesvg.org/icons/{slug}/{variant}.svgslug 即品牌目录名如github、aws-amazon-s3支持图片节点的版本可直接粘贴本地文件把 SVG 下载到与图文件同目录相对路径引用离线可用 小技巧flowchart / C4 风格图里给服务节点挂上kubernetes、aws-amazon-s3这类图标整张图一眼识别技术栈。2️⃣ Draw.io三步把品牌图标贴进画布Draw.iodiagrams.net对 SVG 的支持非常友好操作路径有三条第一步找到图标。在 theSVG 站点搜索目标品牌如figma、postgresql拿到该图标的 SVG 代码或 CDN 地址。第二步把图标搬上画布。任选一种复制 SVG 代码 → 在 Draw.io 里直接粘贴会自动解析为矢量形状菜单 Insert → Image → By URL粘贴 theSVG 的 CDN 地址本地 SVG 文件直接拖进画布第三步调整风格。想统一线条风就选mono变体要品牌官方配色就用default变体。想让图标批量进项目一行 CLI 搞定npx thesvg/cli add github3️⃣ Excalidraw白板上的品牌图标协作白板 Excalidraw 同样直接支持 SVG拖入文件把 theSVG 图标存为.svg站点可一键下载或用上面的 CLI拖进画布即导入为矢量元素复制粘贴复制 SVG 代码后粘贴也能导入导入后可缩放、旋转、分组还能拆成可编辑的描边——手绘风和品牌图标混搭反而很有味道 小技巧Excalidraw 白底场景下dark黑色或mono变体最干净需要强调时再切彩色的default版两种风格同一图标随意切换。 变体选择速查theSVG 每个图标最多提供 7 种变体集成进图纸时按需选择变体键名使用时机品牌色default默认选择需要官方配色单色mono线条风图纸、跟随文字颜色白色light深色背景、深色幻灯片黑色dark浅色背景、强对比字标wordmark页脚署名、品牌全名default变体保证每个图标都有其余按品牌实际情况挑选。 项目路径速查路径说明README.md完整集成方式CDN、CLI、Iconify、MCP、扩展生态public/icons/全部 SVG 源文件按品牌 slug 组织如github/、mermaid/src/data/图标清单数据slug、标题、分类、品牌色packages/icons/核心数据包tree-shakeableLEGAL.md / TRADEMARK.md品牌与商标使用须知✅ 小结三步完成品牌图标进架构图找图标按品牌 slug 在 theSVG 搜到对应 SVG 或 CDN 地址选变体彩色用default线条风用mono深色背景用light进工具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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考