Skip to content

Latest commit

 

History

History
334 lines (288 loc) · 14.1 KB

README.md

File metadata and controls

334 lines (288 loc) · 14.1 KB
Raw

mermaid

来源：https://github.com/mermaid-js/mermaid

文档：https://mermaid-js.github.io/mermaid/#/

About

Mermaid is a Javascript based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development.

Doc-Rot is a Catch-22 that Mermaid helps to solve.

Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams or docs ruins productivity and hurts organizational learning. Mermaid addresses this problem by enabling users to create easily modifiable diagrams, it can also be made part of production scripts (and other pieces of code).

Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor. Tutorials has video tutorials. Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.

For a more detailed introduction to Mermaid and some of its more basic uses, look to the Beginner's Guide and Usage.

🌐 CDN | 📖 Documentation | 🙌 Contribution | 📜 Changelog

Examples

The following are some examples of the diagrams, charts and graphs that can be made using Mermaid. Click here jump into the text syntax.

Flowchart [docs - live editor]

flowchart LR 
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

flowchart LR
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
Loading

Sequence diagram [docs - live editor]

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
Loading

Gantt chart [docs - live editor]

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d

gantt
    section Section
    Completed :done,    des1, 2014-01-06,2014-01-08
    Active        :active,  des2, 2014-01-07, 3d
    Parallel 1   :         des3, after des1, 1d
    Parallel 2   :         des4, after des1, 1d
    Parallel 3   :         des5, after des3, 1d
    Parallel 4   :         des6, after des4, 1d
Loading

Class diagram [docs - live editor]

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}

classDiagram
Class01 <|-- AveryLongClass : Cool
<<Interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
  <<service>>
  int id
  size()
}
Loading

State diagram [docs - live editor]

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

stateDiagram-v2
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
Loading

Pie chart [docs - live editor]

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15

pie
"Dogs" : 386
"Cats" : 85
"Rats" : 15
Loading

Git graph [experimental - live editor]

User Journey diagram [docs - live editor]

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me

  journey
    title My working day
    section Go to work
      Make tea: 5: Me
      Go upstairs: 3: Me
      Do work: 1: Me, Cat
    section Go home
      Go downstairs: 5: Me
      Sit down: 3: Me
Loading 
graph TD
    subgraph Node
        VolumeManager-.->Kubelet
        DesiredStateOfWorldPopulator-.->VolumeManager
        Reconciler-.->VolumeManager
    end

graph TD
    subgraph Node
        VolumeManager-.->Kubelet
        DesiredStateOfWorldPopulator-.->VolumeManager
        Reconciler-.->VolumeManager
    end
Loading 
flowchart TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
Loading 
graph TD
    PI[PodInformer]-. Event .->RSC[ReplicaSetController]
    RSI[ReplicaSetInformer]-. Event .->RSC
    RSC-->worker1
    RSC-. Add ReplicaSet .->queue
    worker1-. Loop .->worker1
    queue-. Get ReplicaSet .->worker1
    RSC-->worker2
    worker2-. Loop .->worker2
    queue-. Get ReplicaSet .->worker2
    style worker1 fill:#fffede,stroke:#ebebb7
    style worker2 fill:#fffede,stroke:#ebebb7
Loading 
graph TD
    Deployment-.->ReplicaSet
    ReplicaSet-.->Pod1
    ReplicaSet-.->Pod2
    ReplicaSet-.->Pod3
Loading 
flowchart TD
	subgraph service[极速空间服务 cluster]
		controller
	end
    controller-.->agent-1
    controller-.->agent-2
    controller-.->agent-3
    controller-.->agent-4
	
	subgraph cluster-1[智慧工程 cluster]
	    agent-1[agent]
	    agent-1-.->worker-1
	    agent-1-.->pvc-1
        subgraph worker-1[worker]
            workspace-1([极速空间])
        end
        pvc-1[(pvc)]
	end

	subgraph cluster-2[媒体软件 cluster]
	    agent-2[agent]
	    agent-2-.->worker-2
	    agent-2-.->pvc-2
        subgraph worker-2[worker]
            workspace-2([极速空间])
        end
        pvc-2[(pvc)]
	end
	
	subgraph cluster-3[平台软件 cluster]
		agent-3[agent]
	    agent-3-.->worker-3
	    agent-3-.->pvc-3
        subgraph worker-3[worker]
            workspace-3([极速空间])
        end
        pvc-3[(pvc)]
	end
	
	subgraph cluster-4[balong cluster]
		agent-4[agent]
	    agent-4-.->worker-4
	    agent-4-.->pvc-4
        subgraph worker-4[worker]
            workspace-4([极速空间])
        end
        pvc-4[(pvc)]
	end
	
	style controller fill:#C1FFE4
	style agent-1 fill:#97CBFF
	style agent-2 fill:#97CBFF
	style agent-3 fill:#97CBFF
	style agent-4 fill:#97CBFF
Loading 
flowchart TD
    controller
    controller-.->label-1
    controller-.->label-2
    controller-.->label-3
    
    subgraph label-1[智慧工程 label]
    	workspace-1([极速空间])
    end
    subgraph label-2[平台软件 label]
    	workspace-2([极速空间])
    end
    subgraph label-3[媒体软件 label]
    	workspace-3([极速空间])
    end
    
	storage[(storage)]
	workspace-1-.-storage
	workspace-2-.-storage
	workspace-3-.-storage
	
	style controller fill:#C1FFE4
Loading