-
-%%{init: { "logLevel": 1, "er": {"fontSize":18 }} }%%
- erDiagram
- CUSTOMER }|..|{ DELIVERY-ADDRESS : has
- CUSTOMER ||--o{ ORDER : places
- CUSTOMER ||--o{ INVOICE : "liable for"
- DELIVERY-ADDRESS ||--o{ ORDER : receives
- INVOICE ||--|{ ORDER : covers
- ORDER ||--|{ ORDER-ITEM : includes
- PRODUCT-CATEGORY ||--|{ PRODUCT : contains
- PRODUCT ||--o{ ORDER-ITEM : "ordered in"
-
-
-flowchart TD
- A[Christmas] ==> D
- A[Christmas] -->|Get money| B(Go shopping)
- A[Christmas] ==> C
- subgraph T ["Test"]
- A
- B
- C
- end
- classDef Test fill:#F84E68,stroke:#333,color:white;
- class A,T Test
- classDef TestSub fill:green;
- class T TestSub
- linkStyle 0,1 color:orange, stroke: orange;
-
-
-%% The width of composite states does not grow with the title
-stateDiagram-v2
- [*] --> Off
- Off --> On
- state MyChoice [[choice]]
- On --> MyChoice
- MyChoice --> Washing
- MyChoice --> Drying
- Washing --> Finished
- Finished --> [*]
-
- %%{init:{
+ %%{int:{
+"themeVariables": {
+ "transitionColor":"red",
+ "labelColor":"yellow",
+ "transitionLabelColor":"blue",
+ "stateBkg":"green",
+ "compositeBackground":"pink",
+ "altBackground":"purple",
+ "clusterTitleBackground":"blue",
+ "compositeBorder":"red",
+ "noteBorderColor":"#522",
+ "noteBkgColor":"#522",
+ "noteTextColor":"white"
+}}}%%
+ %%{int:{
+"themeVariables": {
+ "altBackground":"purple"
+}}}%%
+stateDiagram-v2
+ state CompositeState {
+ state AnotherCompositeState {
+ AnotherState --> YetANotherState:a label
+ }
+ }
+ note left of CompositeState
+ Important information! You can write
+ notes.
+ end note
+
+
+
+ %%{int:{
"themeVariables": {
"transitionColor":"red",
"labelColor":"yellow",
@@ -87,157 +78,21 @@ stateDiagram
}
-
- %%{init:{
-"themeVariables": {
- "transitionColor":"red",
- "labelColor":"yellow",
- "transitionLabelColor":"blue",
- "stateBkg":"green",
- "compositeBackground":"pink",
- "altBackground":"purple",
- "clusterTitleBackground":"blue"
-}}}%%
-stateDiagram-v2
- [*] --> Off
- Off --> On
- On --> Select
- Select --> Washing
- Washing --> Finished
- Finished --> [*]
- state Select
- {
- state "Program 1" as Prg1
- [*] --> Prg1
- Prg1 --> [*]
- [*] --> Prg2
- Prg2 --> [*]
- [*] --> Prg3
- Prg3 --> [*]
- }
-
- state Washing {
- state Using_Prg1 {
- [*] --> P1Step1
- P1Step1 --> P1Step2
- P1Step2 --> P1Step3
- P1Step3 --> [*]
- }
- state Using_Prg2 {
- [*] --> P2Step1
- P2Step1 --> P2Step2
- P2Step2 --> P2Step3
- P2Step3 --> [*]
- }
-
- state Using_Prg3 {
- [*] --> Step1
- Step1 --> Step2
- Step2 --> [*]
- }
- [*] --> Using_Prg1
- [*] --> Using_Prg2
- [*] --> Using_Prg3
- Using_Prg1 --> [*]
- Using_Prg2 --> [*]
- Using_Prg3 --> [*]
- }
-
-
- requirementDiagram
- requirement test_req {
- id: 1
- text: the test text.
- risk: high
- verifymethod: test
- }
-
- functionalRequirement test_req2 {
- id: 1.1
- text: the second test text.
- risk: low
- verifymethod: inspection
- }
-
- performanceRequirement test_req3 {
- id: 1.2
- text: the third test text.
- risk: medium
- verifymethod: demonstration
- }
-
- element test_entity {
- type: simulation
- }
-
- element test_entity2 {
- type: word doc
- docRef: reqs/test_entity
- }
-
-
- test_entity - satisfies -> test_req2
- test_req - traces -> test_req2
- test_req - contains -> test_req3
- test_req <- copies - test_entity2
-
-
-flowchart LR
- classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
- Lorem --> Ipsum --> Dolor
- class Lorem,Dolor dark
-
-
-%%{init: {'theme': 'base' }}%%
-%%{init2: { 'logLevel': 0, 'theme': 'forest'} }%%
-flowchart TD
- L1 --- L2
- L2 --- C
- M1 ---> C
- R1 .-> R2
- R2 <.-> C
- C -->|Label 1| E1
- C <-- Label 2 ---> E2
- C ----> E3
- C <-...-> E4
- C ======> E5
-
-
-flowchart LR
-A[red text] -->|default style| B(blue text)
-C([red text]) -->|default style| D[[blue text]]
-E[(red text)] -->|default style| F((blue text))
-G>red text] -->|default style| H{blue text}
-I{{red text}} -->|default style| J[/blue text/]
-K[
-ed text] -->|default style| L[/blue text]
-M[
-ed text/] -->|default style| N[blue text]
-linkStyle default color:Sienna;
-style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style B stroke:#0000ff,fill:#ccccff,color:#0000ff
-style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style D stroke:#0000ff,fill:#ccccff,color:#0000ff
-style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style F stroke:#0000ff,fill:#ccccff,color:#0000ff
-style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style H stroke:#0000ff,fill:#ccccff,color:#0000ff
-style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style J stroke:#0000ff,fill:#ccccff,color:#0000ff
-style K stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style L stroke:#0000ff,fill:#ccccff,color:#0000ff
-style M stroke:#ff0000,fill:#ffcccc,color:#ff0000
-style N stroke:#0000ff,fill:#ccccff,color:#0000ff
-
-
-
+
+sequenceDiagram
+ Alice->>+John: Hello John, how are you?
+ Alice->>+John: John, can you hear me?
+ John-->>-Alice: Hi Alice, I can hear you!
+ John-->>-Alice: I feel great!
+ note right of John: Hello note reader
+