js绘制流程图、图表------with mermaid.js

zjw0742

于 2016-11-25 20:20:01 发布

阅读量5.3k

点赞数 1

分类专栏： ReactJs 文章标签： mermaid 流程图

本文链接：https://blog.youkuaiyun.com/zjw0742/article/details/53339922

版权

ReactJs 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何利用Mermaid.js库在JavaScript中创建流程图和图表。通过示例代码展示了如何自定义单元格样式，包括设置颜色和背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<script src="./mermaid.min.js"></script>
<link rel="stylesheet" src="./mermaid.css"/>
</head>
<body>

<div class="firstTest">
graph LR;
A--合并-->B;
A-->C;
B-->D;
C-->D;
</div>
<script>
mermaid.init({noteMargin: 10}, ".firstTest");
</script>

</body>

</html>

data-row-style

function changecolor (row,index){
var Class={};
Class.css={};
Class.css.color='red';
Class.css.background='blue';

return Class;
}

{
title: '流程类型',
field: 'WORKFLOW_NAME',
width: '8%',
halign: 'left',
align: 'left',
cellStyle:'changecolum',
sortable: true
},{
title: '主题',
field: 'SUBJECT',
width: '24%',
halign: 'left',
align: 'left',
sortable: true
}, {
title: '故障级别',
field: 'PRIORITY',
width: '6%',
halign: 'left',
align: 'left',
sortable: true
}