Kubernetes mermaid.js diagrams

Flowchart @mermaid.js

Diagram Guide | Kubernetes

simple example code:

Online FlowChart & Diagrams Editor - Mermaid Live Editor

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 

chrismetz09/K8s-docs-mermaid: Notes on use of Mermaid JS to draw diagrams for K8s docs

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 Playground
• Plain text sandbox
• Rich text sandbox

@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