-Day14)
一、.excalidraw是什么格式的文件.excalidraw是Excalidraw的原生文件格式。Excalidraw 是一个开源的在线虚拟白板工具以手绘风格的绘图著称。它的.excalidraw文件本质上是一个JSON 文本文件里面记录了画布上所有元素的完整信息。1.1 文件内部结构用任何文本编辑器如 VS Code、记事本打开.excalidraw文件可以看到结构化的 JSON 数据包含数据项说明type元素类型rectangle、ellipse、arrow、text、freedraw 等x,y元素在画布上的坐标位置width,height元素的尺寸strokeColor,backgroundColor描边和填充颜色strokeWidth,strokeStyle线条粗细和样式opacity透明度boundElements元素之间的绑定关系如箭头连接矩形appState画布视口状态缩放比例、滚动位置等1.2 核心特点纯文本格式本质是 JSON可读性强可用任何文本编辑器打开可版本控制完美适配 Gitdiff 时能清晰看到图形元素的增删改无损编辑保存了完整的绘图信息随时可重新导入继续编辑跨平台兼容在浏览器、VS Code、桌面端均可打开二、在 VS Code 中预览与编辑2.1 安装插件在 VS Code 扩展商店搜索并安装Excalidraw Editor—pomdtr.excalidraw-editor安装完成后无需跳转到浏览器直接在资源管理器中双击.excalidraw文件VS Code 就会以可视化编辑器打开。2.2 工作原理该插件将 Excalidraw 封装在 VS Code 的WebView中运行你在画布上的每一次操作都会通过postMessage将变更后的 JSON 状态同步回写到本地文件文件始终是最新的保存时自动写入磁盘Git 可以正常追踪变更甚至能在 diff 中看到具体哪些图形元素被修改了2.3 常用操作操作方式打开文件双击.excalidraw文件保存Ctrl S自动同步 JSON 到本地切换主题编辑器内点击主题按钮Light / Dark使用素材库点击左侧素材库图标可导入社区分享的图形库三、生成分享文档的四种方式3.1 导出为图片最通用在 VS Code 的 Excalidraw 编辑器中点击左上角☰ 菜单 → Export格式适用场景PNG位图适合插入文档、PPT、邮件兼容性最好SVG矢量图放大不失真文件体积小适合网页.excalidraw.svg特殊格式SVG 图片中嵌入了完整的场景 JSON 数据既能当图片看又能重新导入编辑3.2 嵌入 Markdown 文档对于技术文档和 README推荐以下工作流项目目录 ├── docs/ │ ├── diagrams/ │ │ ├── architecture.excalidraw ← 源文件Git 追踪 │ │ └── architecture.png ← 导出图片供文档引用 │ └── README.md在 Markdown 中引用## 系统架构 进阶技巧配合 Git Hooks 或 CI/CD在提交前自动将.excalidraw导出为 PNG确保文档中的图片始终与源文件同步。3.3 生成在线分享链接如果希望他人能在线查看或协作编辑在编辑器中点击☰ 菜单 → Export → Share或访问 excalidraw.com将.excalidraw文件内容JSON粘贴进去生成公开链接对方打开即可查看和编辑链接支持实时协作多人同时编辑同一张图3.4 导出为可交互网页开发者方案如果你是前端开发者可以将 Excalidraw 集成到自己的项目中npminstallexcalidraw/excalidraw然后在 React 应用中引入组件加载.excalidraw的 JSON 数据实现网页内嵌的交互式白板。四、推荐工作流与最佳实践4.1 团队协作用.excalidraw分享用.png/.svg场景推荐格式理由团队内部设计评审.excalidraw可编辑Git 追踪变更写入技术文档.png/.svg兼容性好渲染稳定对外分享链接Excalidraw 在线链接无需安装任何软件长期归档.excalidraw.svg兼顾可编辑性和可读性4.2 让设计图成为活文档源文件入仓所有.excalidraw文件纳入 Git 版本控制自动导出配置 CI/CD 或 Git Hooks提交时自动导出 PNG/SVG文档引用图片README 和文档中引用导出的静态图片变更可追溯通过 Git diff 查看图形设计的历史变更这套工作流让设计图真正成为了活文档——既能随时回溯历史版本又能保证对外分享的文档始终是最新的。五、快速参考需求解决方案查看文件内容用 VS Code 或记事本打开本质是 JSON在 VS Code 中画图安装pomdtr.excalidraw-editor插件插入文档/邮件导出为 PNG 或 SVG在线协作上传到 excalidraw.com 生成分享链接嵌入网页使用excalidraw/excalidrawnpm 包版本控制直接提交.excalidraw文件到 Git Excalidraw 文件格式(白板画图)-Day14
一、.excalidraw是什么格式的文件.excalidraw是Excalidraw的原生文件格式。Excalidraw 是一个开源的在线虚拟白板工具以手绘风格的绘图著称。它的.excalidraw文件本质上是一个JSON 文本文件里面记录了画布上所有元素的完整信息。1.1 文件内部结构用任何文本编辑器如 VS Code、记事本打开.excalidraw文件可以看到结构化的 JSON 数据包含数据项说明type元素类型rectangle、ellipse、arrow、text、freedraw 等x,y元素在画布上的坐标位置width,height元素的尺寸strokeColor,backgroundColor描边和填充颜色strokeWidth,strokeStyle线条粗细和样式opacity透明度boundElements元素之间的绑定关系如箭头连接矩形appState画布视口状态缩放比例、滚动位置等1.2 核心特点纯文本格式本质是 JSON可读性强可用任何文本编辑器打开可版本控制完美适配 Gitdiff 时能清晰看到图形元素的增删改无损编辑保存了完整的绘图信息随时可重新导入继续编辑跨平台兼容在浏览器、VS Code、桌面端均可打开二、在 VS Code 中预览与编辑2.1 安装插件在 VS Code 扩展商店搜索并安装Excalidraw Editor—pomdtr.excalidraw-editor安装完成后无需跳转到浏览器直接在资源管理器中双击.excalidraw文件VS Code 就会以可视化编辑器打开。2.2 工作原理该插件将 Excalidraw 封装在 VS Code 的WebView中运行你在画布上的每一次操作都会通过postMessage将变更后的 JSON 状态同步回写到本地文件文件始终是最新的保存时自动写入磁盘Git 可以正常追踪变更甚至能在 diff 中看到具体哪些图形元素被修改了2.3 常用操作操作方式打开文件双击.excalidraw文件保存Ctrl S自动同步 JSON 到本地切换主题编辑器内点击主题按钮Light / Dark使用素材库点击左侧素材库图标可导入社区分享的图形库三、生成分享文档的四种方式3.1 导出为图片最通用在 VS Code 的 Excalidraw 编辑器中点击左上角☰ 菜单 → Export格式适用场景PNG位图适合插入文档、PPT、邮件兼容性最好SVG矢量图放大不失真文件体积小适合网页.excalidraw.svg特殊格式SVG 图片中嵌入了完整的场景 JSON 数据既能当图片看又能重新导入编辑3.2 嵌入 Markdown 文档对于技术文档和 README推荐以下工作流项目目录 ├── docs/ │ ├── diagrams/ │ │ ├── architecture.excalidraw ← 源文件Git 追踪 │ │ └── architecture.png ← 导出图片供文档引用 │ └── README.md在 Markdown 中引用## 系统架构 进阶技巧配合 Git Hooks 或 CI/CD在提交前自动将.excalidraw导出为 PNG确保文档中的图片始终与源文件同步。3.3 生成在线分享链接如果希望他人能在线查看或协作编辑在编辑器中点击☰ 菜单 → Export → Share或访问 excalidraw.com将.excalidraw文件内容JSON粘贴进去生成公开链接对方打开即可查看和编辑链接支持实时协作多人同时编辑同一张图3.4 导出为可交互网页开发者方案如果你是前端开发者可以将 Excalidraw 集成到自己的项目中npminstallexcalidraw/excalidraw然后在 React 应用中引入组件加载.excalidraw的 JSON 数据实现网页内嵌的交互式白板。四、推荐工作流与最佳实践4.1 团队协作用.excalidraw分享用.png/.svg场景推荐格式理由团队内部设计评审.excalidraw可编辑Git 追踪变更写入技术文档.png/.svg兼容性好渲染稳定对外分享链接Excalidraw 在线链接无需安装任何软件长期归档.excalidraw.svg兼顾可编辑性和可读性4.2 让设计图成为活文档源文件入仓所有.excalidraw文件纳入 Git 版本控制自动导出配置 CI/CD 或 Git Hooks提交时自动导出 PNG/SVG文档引用图片README 和文档中引用导出的静态图片变更可追溯通过 Git diff 查看图形设计的历史变更这套工作流让设计图真正成为了活文档——既能随时回溯历史版本又能保证对外分享的文档始终是最新的。五、快速参考需求解决方案查看文件内容用 VS Code 或记事本打开本质是 JSON在 VS Code 中画图安装pomdtr.excalidraw-editor插件插入文档/邮件导出为 PNG 或 SVG在线协作上传到 excalidraw.com 生成分享链接嵌入网页使用excalidraw/excalidrawnpm 包版本控制直接提交.excalidraw文件到 Git