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. java连接数据库核心代码

    一.oracle String driver = "oracle.jdbc.driver.OracleDriver"; String url = "jdbc:Oracle ...

  2. rails 修改数据库之后注意修改controller

    rails 修改数据库之后注意修改controller 在view中进行修改之后,注意修改controller中的内容: 这样才可以进行参数的传递:

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

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

  4. 这里是指推送通知跟NSNotification有区别：

    1.NSNotification是系统内部发出通知,一般用于内部事件的监听,或者状态的改变等等,是不可见的2.本地通知与远程通知是可见的,主要用于告知用户或者发送一些App的内容更新,推送一些相关的消 ...

  5. 谷歌浏览器 —— 快捷键（vimium：像使用 vim 一样操作当前页面）

    Chrome 键盘快捷键 拷贝当前页面内的某链接: 首先输入 y(进入 yank 模式),输入 f,为当前页面内的全部超链接编号,然后输入待拷贝的链接编号,即可将该链接复制到粘贴板: 1. 使用 vi ...

  6. Jmeter执行多条Mysql语句报错

    花了很长时间找原因,Jmeter一直返回的是MySql语法错误,就写了两条很简单的删除语句,并且在MySql里可以正常执行 包括换了jdbc驱动包,更改不同的Query Type等 后来发现两条语句拆 ...

  7. TCP/IP协议族简介

    OSI网络分层介绍 网络结构的标准模型是OSI模型,由国际互联网标准化组织定义的网络分层模型.虽然目前没有完全按照这种模型实现的网络协议栈,但是学习这个模型对于我们理解网络协议还是很有帮助的. 1.O ...

  8. .NET MVC权限设计思考之切入点

    在WebForm下我们一般会设计个PageBase继承Page,在OnInit方法中实现对基本权限的验证业务,然后所有的页面在继承PageBase直接继承这项基本权验证业务.而在.NET MVC下我们 ...

  9. C语言中以文本方式读写文件时换行符转换的注意事项

    我们知道在UNIX下是没有回车符(\r)的,只有换行符(\n),而C语言诞生于UNIX(Linux即面向开源的UNIX,Mac OS也是UNIX发展而来的,而Windows是从MS-DOS发展而来,与 ...

  10. <Android Framework 之路>Android5.1 Camera Framework（一）

    Android5.0 Camera Framework 简介 CameraService启动 CameraService是在MediaServer启动过程中进行的 main_mediaserver.c ...