Excalidraw绘图工具 — Excalidraw手绘风格图¶

# 直接访问 https://excalidraw.com
# 不需要注册，不需要登录
# 画完导出 PNG/SVG 即可

# 克隆并本地运行
git clone https://github.com/excalidraw/excalidraw.git
cd excalidraw
npm install      # 安装依赖
npm start        # 启动开发服务器
# 访问 http://localhost:3000

npm install @excalidraw/excalidraw

// 在 React 项目中嵌入 Excalidraw
import { Excalidraw } from "@excalidraw/excalidraw";

function App() {
  return (
    <div style={{ height: "600px" }}>
      <Excalidraw />  {/* 嵌入画板 */}
    </div>
  );
}

# 在 VS Code 扩展市场搜索 "Excalidraw"
# 安装后可以直接在 VS Code 中编辑 .excalidraw 文件

# Obsidian → 设置 → 社区插件 → 搜索 "Excalidraw"
# 安装 Excalidraw 插件
# 可以在笔记中直接创建和编辑手绘图

# 快捷键（大部分和其他画图工具一样）：
V — 选择工具（移动、缩放元素）
R — 矩形
D — 菱形
O — 椭圆/圆形
A — 箭头（自动连接元素）
L — 线条
P — 铅笔（自由绘画）
T — 文字
E — 橡皮擦
I — 插入图片

# 画布操作：
Ctrl+滚轮  — 缩放
空格+拖拽  — 平移画布
Ctrl+A     — 全选
Ctrl+G     — 编组
Ctrl+D     — 复制
Ctrl+Z     — 撤销
Ctrl+S     — 保存到本地

# 连接两个元素：
# 1. 选择箭头工具（A）
# 2. 从一个元素边缘拖到另一个
# 3. 箭头会自动"粘"在元素上，移动元素时箭头跟着走

# 修改样式：
# 选中元素后，左侧工具栏可以修改：
# - Stroke（线条颜色）
# - Fill（填充颜色）
# - Stroke Width（线条粗细）
# - Stroke Style（实线/虚线/点线）
# - Roughness（手绘粗糙度）
# - Font Size（文字大小）
# - Text Align（文字对齐）

# 导出：
# Ctrl+Shift+E 或菜单 → Export
# 格式：PNG、SVG、剪贴板
# 选项：背景透明、包含水印、DPI 倍数

# 内置 Library（预制组件）：
# 1. 点击左上角的 Library 图标（书本图标）
# 2. 浏览社区贡献的组件库
# 3. 拖拽到画布使用

# 常用 Library：
# - UI Wireframe Kit — 界面原型组件
# - Network Diagrams — 网络拓扑图标
# - AWS Architecture Icons — AWS 架构图
# - Database Schema — 数据库图标
# - Flowchart Elements — 流程图组件

# 1. 点击左上角 "Live collaboration" 按钮
# 2. 生成协作链接
# 3. 分享链接给队友
# 4. 所有人可以同时编辑，实时同步
# 5. 可以看到其他人的光标位置

# Excalidraw 支持从 Mermaid 代码生成图表：
# 菜单 → Insert → Mermaid to Excalidraw
# 粘贴 Mermaid 代码，自动转换为手绘风格图

# AI 生成（Excalidraw AI）：
# 输入文字描述，AI 自动生成图表
# 例如："一个三层架构：前端→API→数据库"

// .excalidraw 文件本质是 JSON
// 可以用 Git 版本控制
// 适合技术文档场景：图和代码一起提交
{
  "type": "excalidraw",
  "version": 2,
  "elements": [
    {
      "type": "rectangle",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100
    }
  ]
}

# ===== 快捷键 =====
V  选择      R  矩形      D  菱形
O  圆形      A  箭头      L  线条
P  画笔      T  文字      E  橡皮擦
1  选择      2  矩形      3  菱形
4  圆形      5  箭头      6  线条

Ctrl+D     复制         Ctrl+G     编组
Ctrl+Z     撤销         Ctrl+Y     重做
Ctrl+A     全选         Delete     删除
Ctrl+Shift+E  导出      Ctrl+S     保存

# ===== 导出格式 =====
PNG — 位图（用于文档、PPT）
SVG — 矢量图（用于网页、高清打印）
.excalidraw — 可编辑文件（提交到 Git）