[Javascirpt] Developer-friendly Flow Charts with flowchart.js

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[Javascirpt] Developer-friendly Flow Charts with flowchart.js相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

javascirpt获取随机数

JavaScirpt对象原生方法

javascirpt实现继承

JavaScirpt 认识DOM (汇总)

javascirpt之 thisapplycallbind

javaScirpt事件详解-原生事件基础