mermaid、node-plantuml画图工具使用

MAC下的mermaid安装及使用

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
官网： https://mermaidjs.github.io/
Github 项目地址： https://github.com/knsv/mermaid
npm install -g phantomjs && npm install -g mermaid //安装下载
mermaid demo.gantt -w 1920 -s -p -o images  //运行
    -s 输出svg替代png
    -p 如果选择保存svg的同时保存png
    -o 保存目录
    -w 生成图片宽度
graph LR
H(Unselect_alarm) -.- B
A -.- H
A((Alarms)) -- Processing --> B[Select_alarm]
B --> F(Commit_alarm)
subgraph Alarm audit
F --> G(Audit_alarm)
G -->D
B --> E(Accept_alarm)
A --processing--> C(Reset_alarm)
B --> C
E --> C
C --> D(Alarm_logs)
生成的png图片如下
  
MAC下的node-plantuml安装及使用
 
软件要求: Java : 是运行PlantUML的必需条件, 请在您的环境中安装Java graphviz-dot: 可选的, 但是建议安装 (如果想绘制 除 时序图和活动图以外的图, 就需要安装 Graphviz 软件) 
官网：http://plantuml.com/starting
 在线编辑：<http://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000 
npm install node-plantuml  //安装
puml generate flow.puml -o flow.png  //运行
    -o 生成的文件名
@startuml
scale 768 width
Browser->>Server: 1. POST /rest/rpc/login with email and password
Server->>Server: 2.Creates a JWT \nwith a secret
Server->>Browser: 3. Returns the JWT(token) to the Browser 
Browser->>Server: 4. Sends the JWT(token) on the Authorization Header
Server->>Server: 5.Check JWT signatura. \nGet user information \nfrom the JWT
Server->>Browser: 6. Sends reponse to the client
@enduml
生成的png图片如下
  
@startuml
scale 300 width
:Alarms;
while (Unselect/select ?) is (unselect)
:Unselect alarm;
endwhile (select)
if (Select alarm) then (accept);
:Accept alarm;
:Reset alarm;
else(commit)
:Commit alarm;
:Audit alarm;
endif
:Alarm logs;
@enduml
生成的png图片如下
 
				mermaid是一款开源的画流程图、甘特图、时序图工具，她提供了一种类似markdown的语法来创建各种图。
官网：https://mermaidjs.github.io/
在线编辑器：here
我们先试用mermaid提供的在线编辑器，来熟悉一下mermaid的各种画图语法；
1）流程图
2）时序图：
sequenceDiagram
A-&gt;&gt; B: Qu...
				原文地址：如何利用Nodexl画图——以绘制文献作者关系图为例作者：starfire 
Nodexl是Network Overview,
Discovery and Exploration for
EXCEL的英文缩写，用以进行社会网络分析，由于其学习上手快，后期又具有丰富的功能和灵活的定制，应用较为广泛。
笔者在大致阅览相关论文和软件说明后，有了一些入门级别的思考，记录仅供学习交流。下面就具体介
				在开发过程中，会经常绘制一些图像，使用Visio等软件比较复杂，而且还需要win的环境进行安装，过程繁琐、复杂。可以使用脚本的方式绘制图形。
下面对常见的 GraphViz、Mermaid 工具进行比较和介绍。
GraphViz
graphviz是贝尔实验室开发的一个开源的工具包，它使用一个特定的DSL(领域特定语言): dot作为脚本语言，然后使用布局引擎来解析此脚本，并完成自动布局。graph...
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
之前用过 PlantUML，但是发现这个东西的实现原理是生成 UML 的图片后上传服务端，每次再从服务端读取，因此觉得不够鲁棒，隐私性也不好，因而弃用。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段...
				文章目录References流程图-Flowchart流程图方向图形形状及连接方式自定义风格使用关键字style声明成一个类多次使用/子图绑定事件饼图-pie顺序图-sequenceDiagram类图-class diagrams类之间的关系类注释状态图-State diagrams一个例子看所有并发实体关系图用户旅程图甘特图
References
mermiad画图例子
流程图-Flowchart语法说明
顺序图-Sequence diagrams语法说明
类图-Class diagrams语法说明
首先，我们需要一个工具分析GO项目并生成plantuml需要的uml源文件。
这里，推荐一个大神的作品：go-package-plantuml，其github地址为HERE。也是一个go项目。
使用go-get安装并编译：
go get git.osch...
				Markdown里面使用mermaid画流程图（基础）之前有介绍如何在Markdown里面使用flowchart.js插件支持画流程图。Markdown编辑器Typora同样支持使用mermaid插件来进行画图。Graph关键字graph表示一个流程图的开始，同时需要指定该图的方向。例如
  graph LR 
   A –> B
表示如下一个从左到右的图。流程图的定义仅由graph开始，但是方向
之前都是使用processon来画UML图，虽说有很多模板，画图也比较方便。但是，非会员的话最多只能保存14张图，这就很坑了。每次对图的变更也不太方便，所以琢磨了下，发现了一款好用的画UML图的工具plantuml。 PlantUML是一个开源项目，支持采用编码的方式快速绘制图。这对于我们广大程序员而言无疑是很大的福音。PlantUML的官方文档。
在IDEA 中集成plantuml ...