flowchart.fun是一个在GitHub上颇受欢迎的在线流程图工具，它以简洁风格和直观操作吸引用户。工具利用cytoscape.js和createreactapp，支持实时输入和自定义箭头。同时，文章提及了前端开发人员面临的技能提升挑战，以及一份全面的Web前端学习资料，强调JavaScript作为核心语言的重要性。
这样一个小工具，已经在 GitHub 上获得了 300 + 的标星。
并且，它能实现的效果，也不止是上面展示的这么简单，具体详情，不如一起来在线试试～
功能试玩
你可能也注意到了，在上图中，当输入一行：
on the fly: by type
连接框图的箭头线上就出现了 “on the fly” 的字样。
也就是说，当你想要在线上输入文字，用 “: ” 就可以实现了。
比如 if 结构，就可以这样表示：
并且，箭头并非只能单向连接到下一级，比如想拉一个从第 4 级框图到第 1 级框图的箭头，只需另起一行缩进，输入 (1)。括号中的数字，即为箭头指向的列。
另外需要说明的是，图中的框线都是可以手动调整位置的。
网站还提供了 SVG 文件的下载。
是不是还挺简单、方便的？
flowchart.fun 一上线，就以其简洁的风格、简单的操作赢得了不少网友的点赞。
就有网友已经第一时间把它用在了工作中，并强烈安利：
我已经用它来向客户展示我们的架构了。
如果你没有试过像这样一步一步创建一个图表，我强烈推荐你试一试。
爱了爱了，我想把这个加入我们用生物数据构建图表的工作流中。
而 flowchart.fun 的轻便、响应迅速，也是网友们好评如潮的重要原因：
我感觉这就像命令行一样，我实在很烦 PlantUML 漫长的文档编译时间。
另外，据作者介绍，这款工具主要是用可视化工具库 cytoscape.js 和 Facebook 的 create react app 打造的。
那么，你觉得这个流程图工具可还行？
如果感兴趣，不妨通过下方传送门，亲自体验一下吧～
传送门
网站地址：https://flowchart.fun/
- EOF -
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
最后
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
灵活运用。
[外链图片转存中…(img-o8HbYH3u-1712713224386)]
[外链图片转存中…(img-xQd0CwBA-1712713224387)]
扫一扫
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
