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

```mermaid
sequenceDiagram
  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)

//mermaid.live/edit (and sample diagrams)


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


Graphviz


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


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

<html>
  <div class="mermaid">
  graph LR
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
  </div>
  <div class="mermaid">
     graph TD
      A --- B
      B-->C[fa:fa-ban forbidden]
      B-->D(fa:fa-spinner);
</div> <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script>mermaid.initialize({startOnLoad:true});</script> </html>

mermaid - npm search




No comments: