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




PC HW: HDMI x 4, silent 1 slot graphics card: Asus GeForce GT 730

very interesting HW component that enables very efficient multi-monitor setup

GeForce GT 730 Fanless GDDR5 2GB Graphics Card, 4x HDMI @QuietPC


Asus Launches New GeForce GT 730 Like It's 2014 All Over Again | Tom's Hardware

The graphics card comes equipped with four native HDMI 1.4b ports with HDCP 2.2 support and drives monitors with resolutions up to 4K (3840 x 2160).


Amazon.com: ASUS NVIDIA GeForce GT 730 Graphics Card (PCIe 2.0, 2GB GDDR5 Memory, 4X HDMI Ports, Single-Slot Design, Passive Cooling) : Electronics

$90


this could enabled Tony Robbins style interactive solutions

Tony Robbins on Twitter: "Behind the scenes, the calm before the storm!... / Twitter



CANVAS Studio - Tony Robbins UPW Virtual - Immersive Design Studios