在看网上一些文章的时候,发现他们作的图都挺吃力的。。有得甚至就用文字符号拼凑而成,因此萌发作这样一个工具的念头。javascript
语言:Node.jsjava
工具名: jsToDiagram (未上传)算法
作一个例子,代码以下:npm
import jsToDiagram from './jsToDiagram'; const config = { savePath: './test.png', showPoint: false,//是否显示链接点 } var mvcDiagram = new jsToDiagram(config); //Sample 0 var wakeBlock = mvcDiagram.create('block','睡醒'); var prettyBlock = mvcDiagram.create('block','去吃拉麵'); var judgeBlock = mvcDiagram.create('Judge','加辣嗎'); var noeatBlock = mvcDiagram.create('block','好好吃'); var eatBlock = mvcDiagram.create('block','好辣啊'); var hotelBlock = mvcDiagram.create('block','吃飽睡覺'); wakeBlock.singleLink(prettyBlock); prettyBlock.judge(judgeBlock,eatBlock,noeatBlock); eatBlock.singleLink(hotelBlock); noeatBlock.singleLink(hotelBlock); mvcDiagram.draw((err) =>{ if (err)throw err; console.log('Draw done') });
而后就能够生成以下的流程图:mvc
而后再试一个MVC的示意图工具
var modelBlock = mvcDiagram.create('block','model'); var controllerBlock = mvcDiagram.create('block','controller'); var viewBlock = mvcDiagram.create('block','view'); modelBlock.doubleLink(controllerBlock); controllerBlock.doubleLink(viewBlock); viewBlock.doubleLink(modelBlock); mvcDiagram.draw((err) =>{ if (err)throw err; console.log('Draw done') });
生成图以下:测试
刚写完的小工具,先整理下代码就发个测试版本到npm吧,而后以后就是要重构下算法。spa