街角小林

最近使用 Yjs 给自己开源的一个思维导图加上了协同编辑的功能，得益于该框架的强大，一直觉得很复杂的协同编辑能力没想到实现起来异常的简单，所以通过本文来安利给各位。 要实现协同编辑，目前主要有两种算法

dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘

笔者开源了一个Web思维导图，在做导出为图片的功能时走了挺多弯路，所以通过本文来记录一下。 思维导图的节点和连线都是通过 svg 渲染的，作为一个纯 js 库，我们不考虑通过后端来实现，所以只能思考如

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

相信大家或多或少都在各种网站上使用过新手引导，当网站提供的功能有点复杂时，这是一个对新手非常友好的功能，可以跟随新手引导一步一步了解网站的各种功能，我们要做的只是点击下一步或者上一步，网站就能滚动到指

说到json格式化你肯定很熟悉，毕竟压缩后的json数据基本不可读，为了方便查看，我们可以在编辑器中可以通过插件一键格式化，也可以通过一些在线工具来美化，当然，有时在开发中也会遇到json格式化的需求

富文本编辑器相信大家都用过，相关的开源项目也很多，虽然具体的实现不一样，但是大部分都是使用DOM实现的，但其实还有一种实现方式，那就是使用HTML5的canvas，本文会带大家使用canvas简单实现

Vue3官网中有下面这样一张图，基本展现出了Vue3的渲染原理： 本文会从源码角度来草率的看一下Vue3的运行全流程，旨在加深对上图的理解，从下面这个很简单的使用示例开始： 通过createApp方法

最近接到一个需求，要做一个流程设计的功能，大概长下面这个样子： 支持添加、编辑和删除节点，节点只有四种类型：开始节点、普通节点、分支节点、结束节点。 因为每个节点只有一个进和一个出，且节点不需要支持拖