参考地址：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的更多相关文章

  1. 画图前端：mermaid。时序图/类图/甘特图/流程图/状态图/饼图。类似工具:Typora

    文档 https://mermaidjs.github.io/#/ cdn https://www.bootcdn.cn/mermaid/ 在线编辑 https://mermaidjs.github. ...

  2. java实现甘特图的2种方法:SwiftGantt和Jfree （转）

    http://blog.sina.com.cn/s/blog_50a7c4a601009817.html 第一种方法使用SwiftGantt实现甘特图(进度图推荐这个)   import java.a ...

  3. 还能这么玩？用VsCode画类图、流程图、时序图、状态图...不要太爽！

    文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) 软件设计中,有好几种图需要画,比如流程图.类图.组件图等,我知道大部分 ...

  4. JS中可拖拽的甘特图和流程图

    甘特图: https://www.douban.com/note/441706674/ https://www.uedsc.com/jquery-ganttview.html https://gith ...

  5. matlab画甘特图

    近期为发小论文一直在研究作业调度问题,好不easy把数据搞出来了,结果又被画甘特图给难住了,查了各种资料.anygantt,highchart.Jfree chart等都试了,效果都不咋好.无意中留意 ...

  6. 如何使用excel画甘特图

    甘特图小伙伴们都非常的熟悉,首先小编简单的向各位小伙伴介绍一下什么是甘特图,甘特图内在思想简单,即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间.基本是一条线条图,横轴 ...

  7. Mermaid js与流程图、甘特图..

    https://mermaidjs.github.io/gantt.html https://github.com/jdbranham/grafana-diagram 用 mermaid 画甘特图 h ...

  8. 使用mermain用Markdown的语法画流程图和UML图

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:使用mermain用Markdown的语法画流程图和UML图.

  9. 在博客文章中使用mermaid 定义流程图，序列图，甘特图

    概述 Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图.序列图.甘特图等等. 它的官方网站是 https://mermaid-js.github ...

  10. Excel2010画动态甘特图

    哈哈!你居然真的看简介点进来啦,我也想八一八Henry gantt本人的故事,可是我查了好些资料,一个槽点都没有发现,不过人生经历还是蛮拼的: 此人活了58年,前半生就是一个中规中距的机械工程师&am ...

随机推荐

  1. idea 提交代码到GitHub

    配置账户 配置Git安装目录 一般默认识别,其他参数不变 配置GitHub账户 提交到GitHub 1.VCS->import into version control -> share ...

  2. Curve 替换 Ceph 在网易云音乐的实践

    Curve 块存储已在生产环境上线使用近三年,经受住了各种异常和极端场景的考验,性能和稳定性均超出核心业务需求预期 网易云音乐背景 网易云音乐是中国领先的在线音乐平台之一,为音乐爱好者提供互动的内容社 ...

  3. MySQL索引是怎么支撑千万级表的快速查找？

    前言 在 MySQL 官方提到,改善操作性能的最佳方法 SELECT 在查询中测试的一个或多个列上创建索引.索引条目的作用类似于指向表行的指针,从而使查询可以快速确定哪些行与WHERE子句中的条件匹配 ...

  4. 使用了条件三元运算符来判断 this.temp.id 是否存在且 mt_qty 是否已被赋值

    mt_qty: (this.temp.id && this.temp.mt_qty) ? this.temp.mt_qty : event.wo_wip,在这个修正后的代码中,使用了条 ...

  5. Standard Template Libary or C++ Standard Library

    C++提供一套标准的library称为C++ standard library完全以template完成,所以又被称为Standard Template Library.这套library专门有于实现 ...

  6. Django Template层之自定义tag

    Django Template层之自定义tag by:授客 QQ:1033553122 测试环境 Win7 Django 1.11 实践 步骤1 应用根目录下,新建templatetags包目录(注意 ...

  7. pytest + 登录禅道 ：自动提交bug-编辑bug-确认bug-解决bug-关闭bug

    pytest +  登录禅道 :自动提交bug-编辑bug-确认bug-解决bug-关闭bug 一.Pycharm中创建项目结构 1.新建一个工程,工程名称自己定义,如:zentao 2.在工程的根目 ...

  8. 如何在Linux云服务器上通过Docker Compose部署安装Halo，搭建个人博客网站？

    目录 前置步骤 环境搭建 创建容器组 在系统任意位置创建一个文件夹 创建docker-compose.yaml 启动 Halo 服务 配置反向代理以及域名解析 Halo初始化页面. 更新新版本的hal ...

  9. 【Java】 Springboot+Vue 大文件断点续传

    同事在重构老系统的项目时用到了这种大文件上传 第一篇文章是简书的这个: https://www.jianshu.com/p/b59d7dee15a6 是夏大佬写的vue-uploader组件: htt ...

  10. 【BatchProgram】 读取文本批量创建目录

    NameList.txt文件内容 FILE-NAME-A FILE-NAME-B FILE-NAME-C ... 根据上面文件批量创建对应的目录,且附加序号 CMD代码: @ECHO OFF SETL ...