A few lines of code to generate a flowchart

When I read some articles on the Internet, I found that the pictures they made were very difficult. . Some are even made up of text symbols, so the idea of ​​making such a tool came into being.

Development background

Language: Node.js

Tool name: jsToDiagram (not uploaded)

Example of use

As an example, the code is as follows:

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')
});

Then the following flowchart can be generated:

Then try another MVC schematic

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')
});

The generated graph is as follows:

package test

For the gadget just written, first organize the code and send a test version to npm, and then refactor the algorithm.

 

 

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325452502&siteId=291194637