画流程图、状态图、时序图、甘特图的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 ...
随机推荐
- 推荐王牌远程桌面软件Getscreen,所有的远程桌面软件中使用最简单的一个
今天要推荐的远程桌面软件就是这款叫Getscreen的,推荐理由挺简单: 简单易用:只需要两步就能轻松连上远程桌面 第一步:在需要被远程连接的机器上下载它的Agent程序并启动,点击Send获得一个链 ...
- 外部网关协议BGP
不能全部使用RIP与OSPF的原因有二:互联网规模太大,自治系统间路由选择困难:自治系统间路由选择必须考虑有关策略. 在每一个自治系统中有两种不同功能的路由器,边界路由器和内部路由器. BGP四种报文 ...
- [rCore学习笔记 012]彩色化LOG
实验要求 实现分支:ch1 完成实验指导书中的内容并在裸机上实现 hello world 输出. 实现彩色输出宏(只要求可以彩色输出,不要求 log 等级控制,不要求多种颜色) 隐形要求 可以关闭内核 ...
- ABC357
A link 循环加每一个数,加到哪个数不能加了输出前一个数,注意如果加到最后还能加,记得输出\(n\). 点击查看代码 #include<bits/stdc++.h> using nam ...
- LM Studio + open-webui 快速本地部署大语言模型
目录 一.前言 二.环境准备 三.安装设置 四.下载模型并运行 五.配置 open-webui 写在结尾 一.前言 自 OpenAi 发布 ChatGPT 对话性大语言模型,AI 这两年发展迎来爆发, ...
- 移植自淘宝店家的，硬件SPI通讯3.5寸TFT,LCD屏幕。MSPM0G3507
适用MSPM0G3507 LP开发板 3.5寸TFTLCD屏,SPI通讯 项目是CCStheia的 特点:硬件SPI,速度更快,可以在syscfg中自行修改引脚 蓝奏云: https://wwo.la ...
- Jmeter二次开发函数之入门
背景:Jmeter不能满足我们的参数需求,如生成手机号码.身份证号码等业务,固对jmeter进行二次函数开发. jmeter提供了接口供用户进行二次开发,我们只需引入包进行编辑.从jmeter规范上, ...
- 【Half-Life】 Steam 安装半条命模组
安装办法参考自B站UP主[百科全叔]的文章 https://www.bilibili.com/read/cv543926 半条命模组在ModDB站上下载资源 https://www.moddb.com ...
- 大语言模型（LLM）运行报错：cannot import name 'AutoModel' from 'transformers'
解决方法: 安装pytorch即可,不过需要注意项目的README文件和requirements文件,安装对应版本的pytorch即可.
- .NET 9 优化，抢先体验 C# 13 新特性
前言 微软即将在 2024年11月12日发布 .NET 9 的最终版本,而08月09日发布的.NET 9 Preview 7 是最终发布前的最后一个预览版.这个版本将与.NET Conf 2024一同 ...