幾行代碼生成流程圖

在看網上一些文章的時候，發現他們作的圖都挺吃力的。。有得甚至就用文字符號拼湊而成，因此萌發作這樣一個工具的念頭。

開發背景

語言：Node.js

工具名： jsToDiagram (未上傳)

使用例子

作一個例子，代碼以下：

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的示意圖

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吧，而後以後就是要重構下算法。