Sunday, December 25, 2022

GitHub, VS Code support Mermaid.js graphs (vs Graphviz)

Mermaid JS: Finally There's A Great UML & Diagram Drawing Tool - YouTube

Mermaid vs PlantUML vs HackerDraw: Which One Is Best For You? - YouTube

mermaid.js is a "native js" library, while GraphViz is written in C, so harder to deploy

GitHub adding support for Mermaid diagrams - Show and Tell - Graphviz

Mermaid is a JS library easily embeddable, with sequence diagrams, entity relationship diagrams, gantts, alongside more traditional graphviz-style directed graphs.

Mermaid it is also supported by VS Code, as an extension of Markdown syntax.

Markdown Preview Mermaid Support - Visual Studio Marketplace

Mermaid Preview - Visual Studio Marketplace

  A-->B: Works!

Mermaid Markdown Syntax Highlighting - Visual Studio Marketplace

mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.

mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown @GitHub (MIT license)

// (and sample diagrams)

flowchart.js vs gojs vs graphviz vs jointjs vs mermaid vs mxgraph | npm trends


mdaines/viz.js: A hack to put Graphviz on the web.

Create standalone HTML files · Issue #48 · mermaid-js/mermaid-cli

  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
  <div class="mermaid">
     graph TD
      A --- B
      B-->C[fa:fa-ban forbidden]
</div> <script src=""></script> <script>mermaid.initialize({startOnLoad:true});</script> </html>

mermaid - npm search

No comments: