我司从2022年年初决定思维导图，经过半年多的事件，我们基于自研的绘图框架初步完成脑图组件并成功集成到我们 PingCode Wiki 中，这篇文章主要探讨下这个绘图框架（Plait）的设计点。

如果你用过流程图绘制工具，那么可能会好奇节点之间的连接线是如何计算出来的： 不要走开，跟随本文一起来探究一下吧~

起源 我对思维导图最初的了解来源于我的老婆，她很喜欢用思维导图来记录各种东西，看的多了，作为一个前端，就会好奇这东西是怎么实现的，于是我在网上搜了一下，看到了一篇介绍思维导图基本结构--逻辑结构图的一

在工作和学习中少不了用思维导图作为工具，我们经常用xmind等软件做导图，那么如何开发一个web在线的思维导图呢，这里给大家介绍一种开发思路，大家一起交流一下。

思维导图是一种常见的表达发散性思维的有效工具，本文会完整的介绍如何从头实现一个简易的思维导图，最终成果预览：https://wanglin2.github.io/mind-map/

本文介绍如果使用web技术实现思维导图，内容包括代码的架构与关键技术的实现。文中有思维导图的源码和demo，有兴趣的同学可以看一看。