Draw.io流程图 — Draw.io/diagrams.net¶

# 直接访问 https://app.diagrams.net
# 选择存储方式：Google Drive / OneDrive / 本地设备 / GitHub
# 不需要注册账号

# macOS（Homebrew）
brew install --cask drawio

# Linux（Snap）
sudo snap install drawio

# Windows
# 从 https://github.com/jgraph/drawio-desktop/releases 下载安装
# 或 winget install JGraph.Draw

# 桌面版优势：离线使用，数据不经过任何云服务

# 安装 "Draw.io Integration" 插件
# 之后可以在 VS Code 中直接编辑 .drawio 文件
# 适合把图表和代码放在同一个仓库

# 创建图形：
# 1. 从左侧形状面板拖拽到画布
# 2. 双击画布空白处直接创建
# 3. 用搜索框搜索特定形状

# 连接图形：
# 1. 鼠标悬停在图形边缘，出现蓝色连接点
# 2. 从连接点拖拽到另一个图形
# 3. 连接线会自动路由，避开其他图形

# 文字编辑：
# 双击图形 → 编辑文字
# 双击连接线 → 添加标签

# 快捷键：
# Ctrl+D — 复制选中元素
# Ctrl+Shift+Y — 自动布局
# Ctrl+Shift+H — 适合页面
# Ctrl+G — 编组
# Ctrl+Shift+U — 取消编组

# 流程图：General 形状库中的基本形状
# UML：UML 形状库（类图、序列图、用例图）
# ER 图：Entity Relation 形状库
# 网络图：Networking 形状库
# AWS 架构图：AWS 形状库（19 + 21 子类）
# 思维导图：用树形布局自动排列
# 界面原型：Mockup 形状库

# File → Export as：
# PNG  — 位图（文档、PPT 用）
# SVG  — 矢量图（网页用，无限缩放不模糊）
# PDF  — 文档格式
# HTML — 可交互的网页（支持链接跳转）
# XML  — 原始格式（用于备份或迁移）
# VSDX — Visio 格式（和 Visio 用户交换）
# URL  — 分享链接

# 导出技巧：
# 勾选 "Transparent Background" — 透明背景
# 设置 "Zoom" — 控制导出图片大小
# 勾选 "Shadow" — 添加阴影效果

# 点击工具栏的 Generate 按钮（闪光图标）
# 输入文字描述，AI 自动生成图表
# 支持的图表类型：
# - 流程图
# - 界面原型
# - 基础设施图
# - Mermaid 图表
# - 组织架构图

<!-- 方法1：嵌入 SVG -->
<img src="diagram.drawio.svg" alt="架构图">

<!-- 方法2：嵌入交互式 HTML -->
<iframe src="diagram.drawio.html" width="100%" height="600"></iframe>

<!-- 方法3：GitHub 中直接预览 -->
<!-- 将 .drawio.svg 文件提交到仓库，GitHub 自动渲染 -->

# 修改默认样式：
# Format → Edit Style（或 Ctrl+E）
# 样式是 CSS-like 的字符串：
# shape=mxgraph.flowchart.process;fillColor=#dae8fc;strokeColor=#6c8ebf;

# 创建自定义模板：
# 画好标准图形 → Edit → Create Template
# 下次可以直接从 Template 创建

# 1. 打开 draw.io → 选择 GitHub 存储
# 2. 授权 GitHub 账号
# 3. 选择仓库和分支
# 4. 保存的 .drawio 文件直接提交到 Git
# 5. 团队成员可以协作编辑

# ===== 快捷键 =====
Ctrl+D        复制        Ctrl+Z      撤销
Ctrl+G        编组        Ctrl+Shift+U 取消编组
Ctrl+Shift+Y  自动布局    Ctrl+Shift+H 适合页面
Ctrl+E        编辑样式    Ctrl+K      插入链接
F2            重命名      Delete      删除
Ctrl+Shift+L  锁定/解锁

# ===== 图形操作 =====
拖拽边缘连接点 → 创建连接线
Alt+拖拽      → 复制并移动
Shift+点击    → 多选
双击          → 编辑文字
右键          → 更多选项