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. iOS富文本（一）属性化字符串

    概述 iOS一些复杂的文本布局一般都是由底层的Core Text来实现的,直到iOS7苹果发布了Text Kit框架,Text Kit能够很简单实现一些复杂的文本样式以及布局,而Text Kit富文本 ...

  2. ACM-SG函数之Fibonacci again and again——hdu1848

    Fibonacci again and again Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Jav ...

  3. 0x41 并查集

    太菜了才做到并查集啊啊啊啊啊啊啊啊啊啊啊 还是很有收获的说 水 bzoj4195: [Noi2015]程序自动分析 好题 poj1456 感受到并查集传递性的美妙啊!对于一个商品,去找他过期前那天的集 ...

  4. pyspark MLlib踩坑之model predict+rdd map zip，zip使用尤其注意啊啊啊！

    Updated:use model broadcast, mappartition+flatmap,see: from pyspark import SparkContext import numpy ...

  5. Python笔记（七）

    # -*-coding:utf-8-*- # Python 文件I/O # 打印到屏幕 #print 1234567 # 读取屏幕输入 #input_str=raw_input("Pleas ...

  6. Vue运行npm run dev 时修改端口

    进入项目文件的config文件夹E:\myapp\myproject\config,找到index.js,修改里面的8080端口,改成8088(确定不被别的程序使用的都可以)

  7. 清北集训Day3T1(转换)

    这题可能是我与正解里的最近的一次了,可以还是sb的把正解叉了. 正解其实比较显然:因为$f(x)$只有81个取值,所以我们可以枚举$f(x)$,然后计算$x$,再判断$x$是否可以转化为$f(x)$ ...

  8. 关于getElementsByTagName的遍历顺序

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

  9. 如何让select中的滚动条自动定位到框中选中项的位置

    document.getElementById("hidScrollTop").value = document.getElementById("slcYZYongFa& ...

  10. [luogu2513 HAOI2009] 逆序对数列 (计数dp)

    题目描述 对于一个数列{ai},如果有iaj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数列到底有多少个? ...