id: 14a41b9221044e9cb114a1837ad9e186
parent_id: 
item_type: 1
item_id: 3060a40daaac4d2bb5058dcf41a495f3
item_updated_time: 1764345483495
title_diff: "[{\"diffs\":[[1,\"流程图小工具flowchart-fun\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":19}]"
body_diff: "[{\"diffs\":[[1,\"<html>\\\r\\\n<head>\\\r\\\n  <title>流程图小工具flowchart-fun</title>\\\r\\\n  <basefont face=\\\"微软雅黑\\\" size=\\\"2\\\" />\\\r\\\n  <meta http-equiv=\\\"Content-Type\\\" content=\\\"text/html;charset=utf-8\\\" />\\\r\\\n  <meta name=\\\"exporter-version\\\" content=\\\"YXBJ Windows/608924 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;\\\"/>\\\r\\\n  <style>\\\r\\\n\\tbody, td {\\\r\\\n\\t  font-family: 微软雅黑;\\\r\\\n\\t  font-size: 12pt;\\\r\\\n\\t}\\\r\\\n  </style>\\\r\\\n</head>\\\r\\\n<body>\\\r\\\n<a name=\\\"18670\\\"></a>\\\r\\\n<h1>流程图小工具flowchart-fun</h1>\\\r\\\n\\\r\\\n<div><span>\\\n  <div style=\\\"--en-clipped-content:simplified; --en-clipped-source-url:https://zhuanlan.zhihu.com/p/359466794; --en-clipped-source-title:流程图小工具flowchart-fun;\\\">\\\n<div><br/></div><div style=\\\"min-height: 2394px; font-size: 16px; display:block; min-width: 100%;\\\"> <div style=\\\"background-color:transparent;font:inherit;vertical-align:baseline;\\\"><div style=\\\"background-color:transparent;font:inherit;vertical-align:baseline;font-family:&quot;PT Serif&quot;;font-size:16px;line-height:1.5em;color:rgb(31, 9, 9);text-align:left;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;width:36em;z-index:200;padding-left:2em;padding-right:2em;margin-left:auto;margin-right:auto;position:relative;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;position:relative;margin-left:-25px;margin-right:25px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;padding-top:0px;padding-bottom:9em;position:relative;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;position:relative;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><h1 style=\\\"font-family:&quot;PT Serif&quot;;text-align:left;border:0px;font:inherit;vertical-align:baseline;font-size:35px;font-weight:normal;line-height:35px;margin-bottom:20px;padding:0px;margin:0px;\\\">实战运行手册6期——流程图小工具flowchart-fun</h1><div style=\\\"padding:0px;border:0px;font:inherit;vertical-align:baseline;position:relative;height:1em;line-height:1;text-align:center;margin:0px;padding-top:1.5em;padding-bottom:1.5em;margin-bottom:0px;\\\"><div style=\\\"padding:0px;border:0px;font:inherit;vertical-align:baseline;background:-webkit-linear-gradient(0deg, rgb(243, 242, 238) 1%, rgb(31, 9, 9) 50%, rgb(243, 242, 238) 99%);position:absolute;left:-4em;top:50%;z-index:10;width:100%;padding-left:4em;padding-right:4em;height:0.1em;opacity:0.5;margin:0px;margin-bottom:0px;\\\"><span style=\\\"font:inherit;position:absolute;left:-4em;top:50%;z-index:10;width:100%;padding-left:4em;padding-right:4em;height:0.1em;margin:0px;opacity:0.5;background:-webkit-linear-gradient(0deg, rgb(243, 242, 238) 1%, rgb(31, 9, 9) 50%, rgb(243, 242, 238) 99%);\\\"></span></div></div></div><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:0px;\\\">已认证的官方帐号</div></div></div></div></div></div></div><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">我们平时的工作都会多多少少都用到流程图，向他人阐述我们的想法与思路。实际上，市面上有很多的flowchart小工具，无论免费或付费，多种多样。</p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">对于程序员朋友来说，这些软件需要安装，还是稍显麻烦，再有，绘制流程图能不能再高效一些呢？！比如是否可以打打字就直接生成流程图呢？！</p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">当然可以！接下来我就为大家介绍一款小工具，只要简单拖拽和缩放就可以进行生成flowchart，并保存成图片。</p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">本期运行实战推荐flowchart-fun，一个通过文本录入快速制作生成流程图的小应用</p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">GitHub克隆地址：<u style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;\\\"><a href=\\\"https://github.com/tone-row/flowchart-fun\\\" style=\\\"color:rgb(6, 85, 136);margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;text-decoration:none;\\\">https://github.com/tone-row/flowchart-fun</a></u></p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><b style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;font-weight:bold;\\\">第一步：先克隆项目到本地</b></p><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;margin-bottom:1em;margin-top:1em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;text-align:center;margin-top:1em;margin-bottom:0px;\\\"><img src=\\\":/4a2ff283074549cca48d963a06188312\\\" type=\\\"image/jpeg\\\" data-filename=\\\"v2-9ab6a85faae2432727dc2bf62d715ea8_1440w.jpg\\\" height=\\\"123\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></div></div><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><b style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;font-weight:bold;\\\">第二步：进入到flowchart-fun的存储目录下</b></p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><b style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;font-weight:bold;\\\">第三步：输入指令yarn，并执行</b></p><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;margin-bottom:1em;margin-top:1em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;text-align:center;margin-top:1em;margin-bottom:0px;\\\"><img src=\\\":/406edb14b2b64161af8af3a01caccfac\\\" type=\\\"image/jpeg\\\" data-filename=\\\"v2-bf498dcbc7832df5675d40f6005f80fe_1440w.jpg\\\" height=\\\"194\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></div></div><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><b style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;font-weight:bold;\\\">第四步：再执行yarn start</b></p><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;margin-bottom:1em;margin-top:1em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;text-align:center;margin-top:1em;margin-bottom:0px;\\\"><img src=\\\":/4f6bf898f79446ffaa86824994d17cbb\\\" type=\\\"image/jpeg\\\" data-filename=\\\"v2-806f9ca02799fc280646691b8491df7f_1440w.jpg\\\" height=\\\"346\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></div></div><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\"><b style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;font-weight:bold;\\\">第五步：打开浏览器</b></p><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;margin-bottom:1em;margin-top:1em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;text-align:center;margin-top:1em;margin-bottom:0px;\\\"><img src=\\\":/ba4dba0aa93b46d7b57ca0b664c1267e\\\" type=\\\"image/jpeg\\\" data-filename=\\\"v2-e086c758b3919c2fa506e020832fe3f5_1440w.jpg\\\" height=\\\"310\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></div></div><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">运行完成后，见证奇迹的时刻到了！</p><p style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;margin-bottom:1.5em;\\\">如上图，我在左侧编写文字，在右侧即可生成flowchart，这才真正符合程序员的工作习惯～我接下来分享点使用心得：</p><ol style=\\\"padding:0px;border:0px;font:inherit;vertical-align:baseline;margin:0px 0px 1.5em 1.5em;list-style:decimal;margin-top:-1em;list-style-type:decimal;\\\"><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">一行代表一个流程块；</li><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">缩进代表子节点；</li><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">当你想要在线上输入文字，用“:”就可以实现；</li><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">我们还可以进行单行或多行注释；</li><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">所生成的流程图，点击Download按键可以下载生成svg格式；</li><li style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;list-style-type:inherit;list-style-position:outside;\\\">即可发布在外网，还可以点击Share按钮进行分享。</li></ol><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;margin-bottom:1em;margin-top:1em;\\\"><div style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;text-align:center;margin-top:1em;margin-bottom:0px;\\\"><img src=\\\":/1ab1cc1b47a847b6b2a289dfbf354197\\\" type=\\\"image/png\\\" data-filename=\\\"v2-5458922b503cb5746c56f4ee1e7e80a1_1440w.png\\\" height=\\\"96\\\" style=\\\"margin:0px;padding:0px;border:0px;font:inherit;vertical-align:baseline;display:block;max-width:100%;\\\" width=\\\"576\\\"/></div></div></div></div></div></div></div></div></div></div></div></div>\\\n</div>\\\n</span>\\\n</div></body></html>\\u0000\"]],\"start1\":0,\"start2\":0,\"length1\":0,\"length2\":10290}]"
metadata_diff: {"new":{"id":"3060a40daaac4d2bb5058dcf41a495f3","parent_id":"061de1401cfc4cfaadf6e74e015970e9","latitude":"0.00000000","longitude":"0.00000000","altitude":"0.0000","author":"","source_url":"","is_todo":0,"todo_due":0,"todo_completed":0,"source":"joplin-desktop","source_application":"net.cozic.joplin-desktop","application_data":"","order":1764345886183,"markup_language":2,"is_shared":0,"share_id":"","conflict_original_id":"","master_key_id":"","user_data":"","deleted_time":0},"deleted":[]}
encryption_cipher_text: 
encryption_applied: 0
updated_time: 2025-11-28T16:20:25.854Z
created_time: 2025-11-28T16:20:25.854Z
type_: 13