画流程图、状态图、时序图、甘特图的JS库-mermaid-js
参考地址：https://github.com/mermaid-js/mermaid
原生使用方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/mermaid.min.js"></script>
<script>
mermaid.initialize({ startOnLoad: true });
</script>
</head>
<body>
Here is one mermaid diagram:
<div class="mermaid">
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
</div>
And here is another:
<div class="mermaid">
graph TD
A[Client] -->|tcp_123| B
B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
</body>
</html>
效果图：
vue简单使用方式：
index.html静态模板引入mermaid.js:
<script type="text/javascript" src="./static/mermaid.min.js"></script>
在static下放一个模拟后端返回的mock数据，这儿让后端返回html格式的如result.html：
graph TD
A[Client] --> B[Load Balancer]
B --> C[Server1]
B --> D[Server2]
style A fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5
style B fill:#0f0,stroke-width:5px,stroke:#0f0,opacity:0.5
在vue页面使用如下：
<template>
<div class="mermaid" v-html="html"></div>
</template>
<script>
import axios from 'axios';
export default {
data () {
return {
html: ''
}
},
created() {
axios({
method: 'get',
url: '/static/result.html',
responseType: 'html'
}).then((res) => {
this.html = res.data;
})
},
mounted() {
mermaid.initialize({ startOnLoad: true });
}
}
</script>
画流程图、状态图、时序图、甘特图的JS库-mermaid-js的更多相关文章
- 画图前端：mermaid。时序图/类图/甘特图/流程图/状态图/饼图。类似工具:Typora
文档 https://mermaidjs.github.io/#/ cdn https://www.bootcdn.cn/mermaid/ 在线编辑 https://mermaidjs.github. ...
- java实现甘特图的2种方法:SwiftGantt和Jfree （转）
http://blog.sina.com.cn/s/blog_50a7c4a601009817.html 第一种方法使用SwiftGantt实现甘特图(进度图推荐这个) import java.a ...
- 还能这么玩？用VsCode画类图、流程图、时序图、状态图...不要太爽！
文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 软件设计中,有好几种图需要画,比如流程图.类图.组件图等,我知道大部分 ...
- JS中可拖拽的甘特图和流程图
甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...
- matlab画甘特图
近期为发小论文一直在研究作业调度问题,好不easy把数据搞出来了,结果又被画甘特图给难住了,查了各种资料.anygantt,highchart.Jfree chart等都试了,效果都不咋好.无意中留意 ...
- 如何使用excel画甘特图
甘特图小伙伴们都非常的熟悉,首先小编简单的向各位小伙伴介绍一下什么是甘特图,甘特图内在思想简单,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.基本是一条线条图,横轴 ...
- Mermaid js与流程图、甘特图..
https://mermaidjs.github.io/gantt.html https://github.com/jdbranham/grafana-diagram 用 mermaid 画甘特图 h ...
- 使用mermain用Markdown的语法画流程图和UML图
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.
- 在博客文章中使用mermaid 定义流程图，序列图，甘特图
概述 Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图.序列图.甘特图等等. 它的官方网站是 https://mermaid-js.github ...
- Excel2010画动态甘特图
哈哈!你居然真的看简介点进来啦,我也想八一八Henry gantt本人的故事,可是我查了好些资料,一个槽点都没有发现,不过人生经历还是蛮拼的: 此人活了58年,前半生就是一个中规中距的机械工程师&am ...
随机推荐
- 洛谷P1043
[NOIP2003 普及组] 数字游戏 题目描述 丁丁最近沉迷于一个数字游戏之中.这个游戏看似简单,但丁丁在研究了许多天之后却发觉原来在简单的规则下想要赢得这个游戏并不那么容易.游戏是这样的,在你面前 ...
- Solo 开发者周刊 （第10期）：Sora 之后，谁是被遗忘的？谁又是被仰望的？
这里会整合 Solo 社区每周推广内容.产品模块或活动投稿,每周五发布.在这期周刊中,我们将深入探讨开源软件产品的开发旅程,分享来自一线独立开发者的经验和见解.本杂志开源,欢迎投稿. 好文推荐 Sol ...
- oeasy教您玩转vim - 70 - # 折叠细节
折叠细节 回忆上次 上次我们讲的是折叠 折叠有很多options foldlevel - 显示折叠层次 foldcolumn - 折叠树宽度 foldmethod - 折叠方式 manual - ...
- AT_abc246_d 题解
洛谷链接&Atcoder 链接 本篇题解为此题较简单做法及较少码量,并且码风优良,请放心阅读. 题目简述 给定整数 \(N\),请你找到最小的整数 \(X\),满足: \(X \ge N\). ...
- SQL Server 锁（LOCK）大全
一.锁(LOCK)知识及应用 1.1 锁的基础知识 在任何多用户的数据库中,必须有一套用于数据修改的一致的规则.对于真正的事务处理型数据库,当两个不同的进程试图同时修改同一份数据时,数据库管理系统(D ...
- pycharm中可以运行脚本(只在控制台运行,Debugger不运行,设置的断点没用)但是不能debug脚本
以前用的时候好好地,但是最近上班突然脚本就不能debug了,debug直接报错,如下所示 上网查过该有的原因: 1.在pycharm中两个地方设置成utf-8,页面右下角和File>settin ...
- c++代码实现 RSA的简易demo【偏向实践】
写在前面 [如果你还没搞明白算法具体步骤建议先去看视频了解,本demo旨在简单实践该算法] 本实践在理论上是成立的,但由于计算x的时候很容易溢出,所以观者可以理解该简易demo后对数据进行处理[以字符 ...
- 【RabbitMQ】04 路由模式
在订阅模式的基础上制定一些特定发送规则 创建路由模式的生产者: 注意这些变化,跟之前的订阅模式并不一样 package cn.dzz.routineQueueInProducer; import co ...
- 【JavaWeb】接口请求404的问题排查
响应状态404:404 Page Not Found 根本原因: 服务器找不到这个地址描述的页面资源, 注意是页面资源 可能的出现的开发情况: 1.请求的资源可能真的不存在,是接口,也可以是页面 2. ...
- 【C】Re08 内存
一.概述 程序运行之后,所有的数据加载到内存上 内存会被操作系统进行分区处理, 划分的区域主要分为4个: [1.代码文本区 text] 存放开发者编写的代码文本,二进制内容形式 [2.静态全局区 St ...