项目代码：https://github.com/imaoda/drawio-embed，欢迎star
前言
想必大家一定使用过谷歌文档，腾讯文档，石墨文档等协同文档，它们都支持流程图和思维导图的编辑，这种炫酷神秘的功能如何实现的呢？小编一直在从事协同文档相关的研发工作，今天整理下自己在这块的实践方案，希望对大家有所启示和帮助。
基本流程是引入了两款开源的绘图工具 drawio
(流程图)
和 kityminder _(思维导图)_，将绘制工具插件式的嵌入到页面中，能在需要时唤起，提供用户编辑，并在编辑完成后将数据流回协同文档。
本文会主要围绕如何在前端「嵌入」_(其他过程不在这里展开)_，主要包括：
-
提炼通用嵌入逻辑，开源了
drawio-embed
，方便大家在项目里一键嵌入流程图 -
浅析了这些图嵌入协同文档中的原理，包括如何互相的调用，以及数据传递与转换
什么是嵌入
所谓「嵌入」，指的将
drawio
和
kityminder
静态资源部署后，以
iframe
形式载入到协同文档中，并由协同文档调度进行开启/关闭，接受协同文档的指令，并完成 UI 的控制和数据的传递。
协同文档与这些嵌入页，