Sunday, November 27, 2022

Kubernetes mermaid.js diagrams


Flowchart @mermaid.js


Diagram Guide | Kubernetes

simple example code:

graph TB

   subgraph "zoneB"
       n3(Node3)
       n4(Node4)
   end
   subgraph "zoneA"
       n1(Node1)
       n2(Node2)
   end
 
   classDef plain fill:#ddd,stroke:#fff,stroke-width:4px,color:#000;
   classDef k8s fill:#326ce5,stroke:#fff,stroke-width:4px,color:#fff;
   classDef cluster fill:#fff,stroke:#bbb,stroke-width:2px,color:#326ce5;
   class n1,n2,n3,n4 k8s;
   class zoneA,zoneB cluster;

more complex example, rendered 


Lexical: React text editor

 facebook/lexical: Lexical is an extensible text editor framework that provides excellent reliability, accessibility and performance. @GitHub

Lexical is an extensible JavaScript web text-editor framework with an emphasis on reliability, accessibility, and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical allows developers to create unique text editing experiences that scale in size and functionality.

For documentation and more information about Lexical, be sure to visit the Lexical website.

Here are some examples of what you can do with Lexical:


@lexical/react - npm

Mermaid JS: Diagram Drawing Tool

 informative comparison of popular charging tools

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

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


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


Online FlowChart & Diagrams Editor - Mermaid Live Editor