可在 VSCode 中通过 Draw.io 插件直接创建编辑架构图：安装插件、新建 .drawio 文件、启用云架构图标库、用快捷键绘制正交连接线、导出为透明 PNG 等格式。
如果您希望在 Visual Studio Code 中直接创建和编辑架构图，而无需切换到外部绘图工具，则可以借助 Draw.io 插件实现本地化、集成化的图表绘制。以下是完成该任务的具体操作流程：
本文运行环境：MacBook Air，macOS Sequoia。
Draw.io 插件使 VSCode 具备内嵌图表编辑能力，支持 .drawio 文件的打开、编辑与导出，所有操作均在编辑器界面中完成，无需跳转至浏览器或独立应用。
1、启动 VSCode，点击左侧活动栏中的扩展图标（四个方块组成的图标）。
2、在扩展搜索框中输入 Draw.io Integration，确保选择由 hediet 发布的官方插件（图标为蓝色齿轮加白色图表）。
3、点击“安装”按钮，等待插件下载并自动启用。
新建 .drawio 文件后，VSCode 将调用内嵌的 Draw.io 编辑器，提供完整图形工具栏与图层管理功能，支持拖拽组件、连接线绑定及实时预览。
1、在资源管理器中右键空白处，选择“在资源管理器中新建文件”。
2、将新文件命名为 architecture.drawio，注意扩展名必须为小写 .drawio。
3、双击该文件，VSCode 将加载内嵌编辑器，并显示默认空白画布与左侧形状面板。
Draw.io 默认仅启用基础形状库，架构图需额外启用 AWS、Azure、Google Cloud 及通用系统架构等专业图标集，以提升图表专业性与识别度。
1、点击编辑器顶部菜单栏的 Arrange → Insert → Advanced → Shape Library。
gt是一款简单实用的组织结构图表jQuery插件。gt通过DOM元素，jQuery和CSS3过渡效果来制作组织结构图表。可以使用本地数据，或通过ajax调用来完成数据的填充。
78
2、在弹出窗口中勾选 AWS Cloud、Azure 与 General → System Architecture。
3、点击“OK”，左侧形状面板将新增对应分类，可直接拖拽服务器、数据库、负载均衡器等标准图标。
架构图中组件间依赖关系需通过正交连接线表达，手动绘制易错且低效；启用对齐辅助与快捷键可大幅提升连接精度与效率。
1、按住 Ctrl（macOS 上为 Cmd）键 并拖动组件边缘的蓝色连接点，自动生成吸附式连接线。
2、选中已绘制的连接线，按 Ctrl+Shift+L（macOS 为 Cmd+Shift+L）切换为正交连线模式。
3、双击连接线，在右侧属性面板中将“Edge Style”设为 elbowEdgeStyle，实现带直角拐弯的清晰路径。
完成绘图后需导出为标准图像或矢量格式，以便插入技术文档、README 或 Wiki 页面；Draw.io 插件支持一键导出 PNG、SVG 和 PDF，保留透明背景与缩放无损特性。
1、点击编辑器右上角的 Export 按钮（向下箭头图标）。
2、在导出类型中选择 PNG，勾选 Transparent background 选项。
3、设置分辨率为 2x，点击“Export”保存至项目 assets 目录下，文件名为 architecture-diagram.png。
以上就是使用VSCode和Draw.io插件绘制架构图的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
337
