A geek

使用本地浏览器渲染mermaid流程图

1.先看效果图：

graph LR A-->B
graph LR id1(Start)-->id2(Stop) style id1 fill:#f9f,stroke:#333,stroke-width:4px; style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2018-10-01, 30d Another task :after a1 , 20d section Another Task in sec :2018-10-12 , 12d another task : 24d

2.源代码（存为后缀.html的文件，然后在浏览器中打开即可）

<!doctype html>
<html>
<body>
  <div class="mermaid">
    graph LR
    A-->B
  </div>
  <div class="mermaid">
	graph LR
		 id1(Start)-->id2(Stop)
		 style id1 fill:#f9f,stroke:#333,stroke-width:4px;
		 style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray:5,5;
  </div>
  <div class="mermaid">
    gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2018-10-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2018-10-12  , 12d
    another task      : 24d
  </div>
  <script src="https://unpkg.com/mermaid@7.1.0/dist/mermaid.min.js" charset="utf-8"></script>
  <!--<script src="/js/mermaid.min.js" charset="utf-8"></script>-->
</body>
</html>

3. [Ref]

https://github.com/simonbacquie/mermaid-livereload

Search

    Table of Contents