Sequence diagram - A sequence diagram is a type of interaction diagram in UML (Unified Modeling Language) that illustrates the interactions between objects or components in a system over time. It shows how objects collaborate in a particular scenario by representing the sequence of messages exchanged between them.
sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ->> Bob: Message 1
Bob ->> Charlie: Message 2
Note right of Charlie: Processing
Charlie -->> Bob: Response 1
Bob -->> Alice: Response 2
class diagram - Class diagrams are a type of diagram used in UML (Unified Modeling Language) to represent the structure of a system or software application in terms of classes, their attributes, methods, and relationships.
classDiagram
class Car {
- String make
- String model
- int year
+ void start()
+ void stop()
}
class Engine {
- int horsepower
+ void start()
+ void stop()
}
Car --> Engine
State Diagrams - State diagrams, also known as state machine diagrams or statecharts, are used to represent the behavior of a system or component over time. They depict the various states that an object or system can be in, as well as the transitions between those states triggered by events.
stateDiagram-v2
[*] --> Off
state Off {
[*] --> SwitchedOff
SwitchedOff --> TurningOn : turn_on_event
SwitchedOff --> Charging : charge_event
}
state TurningOn {
[*] --> Ready
Ready --> On : success
Error --> Off : failure
on_entry:
- DisplayMessage("Turning on...")
on_exit:
- Beep()
}
state Charging {
[*] --> Ready
Ready --> Off : error_detected
Ready --> On : battery_full
}
state On {
[*] --> Active
Active --> Inactive : user_inactive
Inactive --> Active : user_active
Active --> Off : turn_off_event
}
state Active {
[*] --> Working
Working --> Resting : work_done
Resting --> Working : work_resumed
}
state Inactive {
[*] --> Idle
Idle --> Sleep : inactive_timeout
Sleep --> Idle : active_timeout
}
state Error {
[*] --> Fatal
Fatal --> Off : reset_event
}
%% Events and actions
[*] --> Off : reset_event
Off --> Off : turn_on_event, charge_event
TurningOn --> On : success
TurningOn --> Error : failure
Charging --> On : battery_full
Charging --> Off : error_detected
%% Actions
classDef event fill:#f9f,stroke:#333,stroke-width:2px;
classDef action fill:#ccf,stroke:#333,stroke-width:2px;
SwitchedOff: turn_on_event, charge_event
Ready: battery_full, error_detected
TurningOn: success, failure
On: turn_off_event, user_inactive, user_active
Active: work_done, work_resumed
Inactive: inactive_timeout, active_timeout
Error: reset_event
class Off, TurningOn, Charging, On, Active, Inactive, Error action
class DisplayMessage, Beep, Idle, Sleep action
entity relationship diagrams
erDiagram
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE-ITEM : contains
CUSTOMER }| -- || DELIVERY-ADDRESS : "lives at"
user journey diagrams
graph TD;
Start((Start)) --> |User visits website| LandingPage((Landing Page));
LandingPage --> |User explores| Features((Features));
Features --> |User signs up| SignUp((Sign Up));
Features --> |User learns more| LearnMore((Learn More));
SignUp --> |User completes registration| Dashboard((Dashboard));
LearnMore --> |User explores further| Features;
Dashboard --> |User interacts with dashboard| End((End: User journey complete));
Network diagrams
graph TD;
A[Router] -->|Ethernet| B[Switch];
A -->|WiFi| C[Wireless Access Point];
B -->|Ethernet| D[Desktop PC];
B -->|Ethernet| E[Laptop];
B -->|Ethernet| F[Printer];
C -->|WiFi| G[Smartphone];
C -->|Ethernet| H[Network Attached Storage];
C -->|WiFi| I[Tablet];
user flow diagrams
graph TD;
A[Home Page] -->|1. Clicks "Shop Now"| B[Product Listing];
B -->|2. Selects a product| C[Product Details];
C -->|3. Adds product to cart| D[Shopping Cart];
D -->|4. Proceeds to checkout| E[Checkout];
E -->|5. Enters shipping details| F[Shipping Information];
F -->|6. Confirms shipping method| G[Shipping Method];
G -->|7. Enters payment details| H[Payment Information];
H -->|8. Confirms payment| I[Order Confirmation];
I -->|9. Redirects to "Thank You" page| J[Thank You Page];
deployment diagrams - showing syntax error
organization chart
graph TD;
classDef ceoStyle fill:#ffcc66,stroke:#ff9900,stroke-width:2px;
classDef vpStyle fill:#66ccff,stroke:#3399ff,stroke-width:2px;
classDef managerStyle fill:#99ff99,stroke:#00cc00,stroke-width:2px;
classDef employeeStyle fill:#fff,stroke:#333,stroke-width:1px;
A[CEO] --> B[CTO];
A --> C[CFO];
A --> D[COO];
B --> E[VP of Engineering];
B --> F[VP of Product];
C --> G[VP of Finance];
D --> H[VP of Operations];
E --> I[Engineering Manager];
E --> J[Engineering Manager];
F --> K[Product Manager];
G --> L[Finance Manager];
H --> M[Operations Manager];
class A ceoStyle;
class B,C,D vpStyle;
class E,F,G,H managerStyle;
class I,J,K,L,M employeeStyle;
organization chart with scroll bars through css and not through html
graph TD;
classDef routerStyle fill:#f9f9f9,stroke:#333,stroke-width:2px;
classDef switchStyle fill:#ffcc99,stroke:#f66,stroke-width:2px;
classDef accessPointStyle fill:#ffcc99,stroke:#f66,stroke-width:2px;
classDef deviceStyle fill:#99ff99,stroke:#339933,stroke-width:2px;
classDef printerStyle fill:#99ff99,stroke:#339933,stroke-width:2px;
classDef smartphoneStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
classDef storageStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
classDef tabletStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
class diagram-container diagram-containerStyle;
A[Router] -->|Ethernet| B[Switch];
A -->|WiFi| C[Wireless Access Point];
B -->|Ethernet| D[Desktop PC];
B -->|Ethernet| E[Laptop];
B -->|Ethernet| F[Printer];
C -->|WiFi| G[Smartphone];
C -->|Ethernet| H[Network Attached Storage];
C -->|WiFi| I[Tablet];
class A routerStyle;
class B switchStyle;
class C accessPointStyle;
class D,E,F deviceStyle;
class G smartphoneStyle;
class H storageStyle;
class I tabletStyle;
test scroll bars using css used earlier in iframe
classDef diagram-containerStyle width:1000px, height:600px, overflow:auto, border:1px solid #ccc;
graph TD;
classDef routerStyle fill:#f9f9f9,stroke:#333,stroke-width:2px;
classDef switchStyle fill:#ffcc99,stroke:#f66,stroke-width:2px;
classDef accessPointStyle fill:#ffcc99,stroke:#f66,stroke-width:2px;
classDef deviceStyle fill:#99ff99,stroke:#339933,stroke-width:2px;
classDef printerStyle fill:#99ff99,stroke:#339933,stroke-width:2px;
classDef smartphoneStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
classDef storageStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
classDef tabletStyle fill:#cc99ff,stroke:#663399,stroke-width:2px;
class diagram-container diagram-containerStyle;
A[Router] -->|Ethernet| B[Switch];
A -->|WiFi| C[Wireless Access Point];
B -->|Ethernet| D[Desktop PC];
B -->|Ethernet| E[Laptop];
B -->|Ethernet| F[Printer];
C -->|WiFi| G[Smartphone];
C -->|Ethernet| H[Network Attached Storage];
C -->|WiFi| I[Tablet];
class A routerStyle;
class B switchStyle;
class C accessPointStyle;
class D,E,F deviceStyle;
class G smartphoneStyle;
class H storageStyle;
class I tabletStyle;