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. nyist oj 115 城市平乱 (最短路径）

    城市平乱 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 南将军统领着N个部队.这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安.这M个城市 ...

  2. uva是崩了 吗，还是我太年轻？

    刚刚提交了一道题,发现提交状态一直是in judge queue,去提交状态那里看了下,排在我20分钟前的也在in judge queue,不知道前面还有多少.顿时感到好无力......

  3. java之 ------ 设计思想

    java的设计思想 (设计思想.是须要不断领悟的.. . ) 一.封装 学java的人都知道这是向对象的编程语言,从字面上理解,就是针对对象的一些操作,将具有某一特性的实体封装成一个类或者是将具有一定 ...

  4. 【scikit-learn】交叉验证及其用于參数选择、模型选择、特征选择的样例

     内容概要¶ 训练集/測试集切割用于模型验证的缺点 K折交叉验证是怎样克服之前的不足 交叉验证怎样用于选择调节參数.选择模型.选择特征 改善交叉验证 1. 模型验证回想¶ 进行模型验证的一个重要目 ...

  5. codecombat之边远地区的森林1-11关及地牢38关代码分享

    codecombat中国游戏网址:http://www.codecombat.cn/ 全部代码为javascript代码分享 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  6. How to include custom library into maven local repository?--转

    原文地址:https://www.mkyong.com/maven/how-to-include-library-manully-into-maven-local-repository/ There ...

  7. redis简单的事务

    Redis与 mysql事务的对比 占位 Mysql Redis 开启 start transaction muitl 语句 普通sql 普通命令 失败 rollback 回滚 discard 取消 ...

  8. Linux中安装redis的phpredis扩展

    下载phpredis扩展 http://pecl.php.net/package/redis wget http://pecl.php.net/get/redis-4.0.2.tgz 需要环境配置文件 ...

  9. 关于getElementsByTagName的遍历顺序

    关于getElementsByTagName的遍历顺序是怎么样的呢? getElementsByTagName的遍历顺序是从HTML的页面从上到下遍历还是按照标签的嵌套顺序层层遍历的呢? 来做个小小的 ...

  10. （转）Django学习之 第四章：Django模板系统

    前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的 这会导致几个问题: 1.显然,任何页面的改动会牵扯到Python代码的改动 网站的设计改动会比Python代码改 ...