[Javascirpt] Developer-friendly Flow Charts with flowchart.js
阿新 • • 發佈：2018-02-06
bsp -s out app col friends .com library rendering
Flowchart.js is a great tool for creating quick, simple flowcharts in a way that keeps you out of a WYSIWYG, and keeps your productive. No more drawing lines, no more determining how to draw a shape, no more deciding relative size and distance. Flowchart.js makes it easy to prototype new concepts and confirm product flows. Built in JavaScript, the library is complete with HTML rendering and a standard grammar and syntax for creating your flows.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Flowchart.js Example Project</title> </head> <body> <div id="chart"></div> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.6/flowchart.min.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script> <script type="text/javascript" src="script.js"></script> </body>
axios.get(‘/data/additional-sample.txt‘).then(({data}) => {
const fc = flowchart.parse(data);
fc.drawSVG(‘chart‘);
});
Flowchart 1:
start=>start end=>end operation=>operation: Operation Example subroutine=>subroutine: Subroutine Example condition=>condition: True or False? inputoutput=>inputoutput: Input output example start->operation->condition condition(yes)->subroutine->end condition(no)->inputoutput->end
Flowchart 2:
s=>start: User would like to use the application e=>end: User is authenticated e2=>end: User is not authenticated o1=>operation: User logs in with email and password c1=>condition: Email is valid? c2=>condition: Password is valid? io1=>inputoutput: Username or password is invalid, notify user s->o1->c1 c1(yes)->c2 c1(no)->io1->e2 c2(yes)->e c2(no)->io1->e2
st=>start: I wan‘t to go out with 4 friends cond1=>condition: Vegans? cond2=>condition: Vegetarians? cond3=>condition: Kosher? e1=>end: Veggie Sushi e2=>end: Pizza e3=>end: Oysters e4=>end: Sarge‘s Deli (Open 24 Hours) io1=>inputoutput: Argue about best option st->cond1 cond1(yes)->e1 cond1(no)->cond2 cond2(yes)->e2 cond2(no)->cond3 cond3(yes)->io1->e4 cond3(no)->e3
[Javascirpt] Developer-friendly Flow Charts with flowchart.js