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的更多相关文章

  1. Markdown Sublime flowchart.js 流程图

    先亮出来一个 flowchart.js 的 Sample 给 Sublime 安装 MarkdownPreview,这个不必多说了 Sublime Text -> Preferences -&g ...

  2. Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云！

    Developer Friendly | 基础设施即代码的事实标准Terraform已支持京东云! Chef.Puppet.Ansible.SaltStack 都可以称为配置管理工具,这些工具的主要目 ...

  3. 腾讯云部署golang flow流程，vue.js+nginx+mysql+node.js

    这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...

  4. flow 静态类型检查 js

    1.flow介绍 https://ustbhuangyi.github.io/vue-analysis/prepare/flow.html#为什么用-flow 2.使用 (1)安装flow (2)项目 ...

  5. 初探flow.js

    第一部分:前言 我们知道JS是弱类型语言,在声明变量时不论是什么类型的变量我们都用var即可,所以js是非常灵活的,但是同时问题就是弱类型语言有可能会出错,比如在调用函数时,且往往在运行起来时才可以检 ...

  6. js to svg flowchart

    js to svg flowchart flowchart https://flowchart.js.org/ https://github.com/adrai/flowchart.js https: ...

  7. flow

    Flow vs Stream https://wikidiff.com/flow/stream As nouns the difference between flow and stream is t ...

  8. 转：超级好用的流程图js框架

    支叫图论(Graph Theroy).利用图我们可以做很多工具,比如思维导图,流程图,状态机,组织架构图,等等.今天我要做的是用开源的HTML5工具来快速构造一个做图的工具. 工具选择 预先善其事,必 ...

  9. markdown-it + highlight.js简易实现

    markdown-it 官方demo markdown-it 文档 1.配置highlightjs,针对markdown中各种语言高亮,针对对应的标签 pre code 里面的样式 -- index. ...

随机推荐

  1. Flume 读取实时更新的日志文件

    http://blog.csdn.net/bright60/article/details/50728306 我用了第一种方法. 1. 日志文件每天roate一个新文件 a)  方案一 There i ...

  2. itunes connect上传截图提示无法加载文件问题

    解决的方法: 图片名字中不能包括汉字,要英文字母或数字.

  3. 并行编程(1) - sum.msic.Unsafe 一

    相信看过java源代码的同学.对 sum.msic.Unsafe 这个类并不陌生,特别是在java.util.concurrent包有非常多的使用. sum.msic.Unsafe源代码:      ...

  4. 2015.04.28,外语,读书笔记-《Word Power Made Easy》 12 “如何奉承朋友” SESSION 36

    1. the great and the small 拉丁词语animus(mind的意思),animus和另一个拉丁词根anima(life principle.soul.spirit),是许多单词 ...

  5. Object::connect: Cannot queue arguments of type 'QMap<QString,QString>'（要使用qRegisterMetaType<StringMap>进行注册）

    QObject::connect: Cannot queue arguments of type 'QMap<QString,QString>',(Make sure 'QMap<Q ...

  6. 客户端通过wcf来启动或者停止服务器上的windows service

    1.设置服务器上的windows service的security,下面的命令只能用cmd.exe来运行(以管理员模式) sc sdset "LISA_43_Dev_Batch" ...

  7. 14. Longest Common Prefix[E]最长公共前缀

    题目 Write a function to find the longest common prefix string amongst an array of strings. If there i ...

  8. BZOJ 4522 Pollard-rho+exgcd

    思路: N=P*Q 求出来P和Q 模拟就好- //By SiriusRen #include <cstdio> #include <algorithm> using names ...

  9. 高并发之后端优化(PHP)

    页面静态化 使用模板引擎 可以使用Smarty的缓存机制生成静态HTML缓存文件 $smarty->cachedir=$ROOT·"/cache"://缓存目录 $smart ...

  10. 微信小程序 input使用letter-spacing失效问题

    根据ui设计稿, 本来思路是一个input搞定,下面的线使用背景图 background:url('/images/line.png')no-repeat bottom center; 然后使用let ...