【开源工具】墨刀设计导出工具：一键将原型设计转换为文档，设计师和产品经理的效率神器！

前言

大家好！今天要给大家推荐一款开源的工具 —— 墨刀设计导出工具（modao-exporter）。

墨刀是国内非常流行的原型设计工具。但当我们需要把设计稿导出成文档时，却经常遇到各种问题：

• 原型设计导出不方便
• 批注信息难以批量提取
• 多画布项目管理复杂

这款工具可以一键将墨刀的离线原型文件解析为结构化的 Markdown 或 Word 文档，自动提取设计图与批注，直接可用作功能详细设计文档！

GitHub 地址：https://github.com/zjysyxx/modao-exporter

关键词：墨刀转Word · 墨刀转Markdown · 墨刀格式转换 · 墨刀批注导出 · 墨刀离线包解析

---

首先你要先把墨刀导出为离线演示包，并解压；

界面预览

先来看看工具的界面，简洁直观，三步完成导出：

1. 选择你解压后的墨刀文件夹
2. 程序会识别你的画布和批注信息
3. 点击导出即可

---

功能特性

功能	说明
多画布支持	自动识别所有用户画布（"画布"、"画布 Copy" 等），导出全部页面
批注完整提取	还原富文本多段落批注，包括动态组件内的批注
设计图导出	将页面图片复制到输出目录的 images/ 子文件夹
Markdown 导出	封面 → 概述 → 逐页章节（设计图 + 批注表格）
Word 导出	生成带封面、页面树、设计图、批注表格的 .docx 文件
跨版本兼容	同时支持旧版（v1 明文）和新版（v2 gzip 压缩）墨刀数据格式
跨平台	Windows（EXE）和 macOS（DMG）均可运行

---

快速开始

方式一：下载安装包（推荐）

从 Releases 页面 下载最新版本：

系统	文件	说明
Windows	墨刀设计导出工具-x.x.x-setup.exe	安装包
Windows	墨刀设计导出工具-x.x.x-portable.exe	免安装便携版
macOS (Apple M1/M2)	墨刀设计导出工具-x.x.x-arm64.dmg	Apple Silicon
macOS (Intel)	墨刀设计导出工具-x.x.x-x64.dmg	Intel 芯片

方式二：从源码运行

# 环境要求：Node.js ≥ 18
git clone https://github.com/zjysyxx/modao-exporter.git
cd modao-exporter
npm install
npm run dev

自行打包

npm run dist:win     # 打包 Windows EXE
npm run dist:mac     # 打包 macOS DMG（需在 macOS 上执行）

---

使用教程

第一步：获取墨刀离线包

1. 打开墨刀项目网页版
2. 点击右上角菜单 → 离线下载 / 导出离线包
3. 解压得到一个文件夹（内含 extra/、uploads7/ 等子目录）

第二步：导出文档

1. 启动工具，点击 "浏览文件夹"，选择解压后的墨刀文件夹
2. 工具自动解析，展示所有画布和页面（默认全选）
3. 根据需要勾选/取消页面
4. 选择导出格式：Markdown 或 Word（.docx）
5. 选择保存位置，导出完成

导出结果示例

输出目录/
├── 项目名称-功能设计.md 或 .docx   ← 主文档
└── images/                         ← 设计图片（自动复制）
    ├── v2_xxx.png
    └── ...

---

导出的文档效果

这是工具导出的功能设计文档截图，包含完整的设计图和批注信息：

导出的 Word 文档结构：

• 封面（项目名、版本、日期、画布尺寸）
• 项目概述 + 页面树列表
• 每个页面独立章节：设计图 + 批注表格

---

技术原理

数据格式解析

墨刀离线包的核心数据存储在 extra/data.1.js 中：

window.hzv5.flpk = [元数据, 设计快照, 增量更新, 时间戳]

v1 格式（旧版）：

• flpk[2] 直接为明文操作码数组

v2 格式（新版）：

• flpk[1] 为多个 gzip+base64 压缩块
• flpk[2] 为明文增量更新
• 两者合并后构成完整操作序列

项目结构

src/
├── main.ts                  # Electron 主进程 + IPC
├── preload.ts               # 渲染进程桥接
├── index.html               # UI 界面
├── parser/
│   ├── dataParser.ts        # 核心解析器
│   ├── decoder.ts           # 字段解码
│   └── types.ts             # TypeScript 类型定义
└── exporter/
    ├── mdGenerator.ts       # Markdown 文档生成器
    ├── template.ts          # 模板
    └── wordGenerator.ts     # Word (.docx) 文档生成器

---

常见问题

Q：提示"Invalid modao folder: missing extra directory"

A：请确认选择的是离线包解压后的根目录（该目录下应直接包含 extra/ 文件夹）。

Q：多个画布的页面名称前有 [画布名] 前缀

A：正常行为，用于区分不同画布的同名页面。仅一个用户画布时不会添加前缀。

Q：页面识别正确但显示 0 条批注

A：墨刀批注存储在 flpk[2] 增量更新中，可能因为项目无近期编辑而为空。

---

支持的文件结构

my-project/
├── extra/
│   ├── data.0.js    ← 项目元信息
│   ├── data.1.js    ← 设计数据
│   └── data.2.js    ← 部分项目使用此文件
├── uploads7/
│   └── images/      ← 设计图片资源
└── index.html

---

结语

如果你也在使用墨刀做产品设计，不妨试试这个工具！

项目地址：https://github.com/zjysyxx/modao-exporter

如果对你有帮助，欢迎 Star ⭐ 支持一下！

---

工具使用过程中如有问题，欢迎在 GitHub 提 Issue。