14 KiB
14 KiB
graph TD
CEO[Richel<br>CEO]:::executive --> CTO[John Smith<br>CTO]:::executive;
CEO --> CFO[Linda Lee<br>CFO]:::executive;
CEO --> COO[Mike Brown<br>COO]:::executive;
CTO --> ITManager[Alex Johnson<br>IT Manager]:::manager;
CTO --> DevLead[Emily White<br>Development Lead]:::manager;
ITManager --> SysAdmin[Chris Green<br>System Administrator];
ITManager --> NetEng[Sam Patel<br>Network Engineer];
DevLead --> Dev1[Robin Taylor<br>Developer];
DevLead --> Dev2[Jordan Casey<br>Developer];
CFO --> AccManager[Kim Wu<br>Accounting Manager]:::manager;
AccManager --> Acc1[Sophia Martinez<br>Accountant];
AccManager --> Acc2[Oliver Hernandez<br>Accountant];
COO --> OpManager[Noah Wilson<br>Operations Manager]:::manager;
OpManager --> HRManager[Emma Garcia<br>HR Manager]:::manager;
HRManager --> HR1[Isabella Rodriguez<br>HR Specialist];
HRManager --> HR2[Mason Lee<br>HR Specialist];
COO --> LogManager[Lucas Anderson<br>Logistics Manager]:::manager;
LogManager --> Log1[Charlotte Wong<br>Logistics Coordinator];
LogManager --> Log2[Ethan Kim<br>Logistics Coordinator];
classDef executive fill:#f9f,stroke:#333,stroke-width:4px,color:#000;
classDef manager fill:#bbf,stroke:#333,stroke-width:2px,color:#000;
Getting Started with Mermaid
Mermaid lets you create diagrams using text and code, making documentation easier and more maintainable. This guide will introduce you to Mermaid's capabilities and how to begin using it.
Introduction to Mermaid
Mermaid simplifies the process of generating diagrams like flowcharts, sequence diagrams, class diagrams, and more, all from text descriptions.
How to Use Mermaid
To use Mermaid, you typically need a platform that supports it (like GitHub or GitLab) or use it within Markdown editors that have Mermaid integration.
Basic Syntax
Mermaid diagrams are defined using a special syntax code block in Markdown files:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
Remove the backslash \ before the backticks to use this in your Markdown. This example creates a simple flowchart.
Diagram Types
Mermaid supports various diagram types. Here are some of the most common ones:
1. Flowcharts
Create flowcharts to visualize processes and workflows.
graph LR;
A[Start] --> B{Decision};
B -->|Yes| C[Do Something with Melodi];
B -->|No| D[Do Something Else];
C --> E[End];
D --> E;
2. Sequence Diagrams
Sequence diagrams are perfect for showing interactions between actors in a system.
sequenceDiagram;
participant A as User;
participant B as System;
A->>B: Request;
B->>A: Response;
3. Gantt Charts
Gantt charts help in visualizing project schedules.
gantt
title A Gantt Chart
dateFormat YYYY-MM-DD
section Section
A task :a1, 2024-01-01, 30d
Another task :after a1 , 20d
4. Class Diagrams
Class diagrams are useful for representing the structure of a system.
classDiagram
class MyClass {
+publicMethod()
-privateMethod()
}
Customization
Mermaid allows you to customize your diagrams with styles and colors.
graph TD;
A-->B;
style A fill:#f9f,stroke:#333,stroke-width:4px
style B fill:#bbf,stroke:#f66,stroke-width:2px
gitGraph
commit
commit
branch develop
commit
commit
commit
checkout main
commit
commit
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 Hidden Gems
quadrant-2 Star Performers
quadrant-3 Underperformers
quadrant-4 Visibility Without Impact
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
quadrantChart
title Reach and Engagement of Campaigns: A Marketing Crazy Hot Matrix
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 Unicorn Campaigns
quadrant-2 Hidden Gems
quadrant-3 Underperformers
quadrant-4 Attention Seekers
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
journey
title User Journey to Becoming a Rock Star
section Discover Music
Develop an interest in music: 5: User
Learn to play an instrument: 4: User
Experiment with different music genres: 3: User
section Early Development
Form or join a band: 5: User
Write original songs: 4: User
Perform at local gigs: 3: User
section Build a Following
Create social media profiles: 4: User
Record and share music online: 4: User
Engage with fans: 4: User
section Professional Growth
Record a demo or EP: 4: User
Get noticed by a music label: 3: User
Sign a record deal: 3: User
section Achieve Rock Star Status
Release a hit single or album: 5: User
Go on a national or international tour: 5: User
Receive music awards/recognition: 5: User
journey
title Journey to Rock Stardom
section Inspiration and Beginnings
Discover passion for music: 5: Aspiring Artist
Self-taught musician, exploring instruments: 4: Aspiring Artist
Influenced by rock legends, dreams begin: 3: Aspiring Artist
section Honing the Craft
Join garage bands, learn collaboration: 5: Emerging Musician
Write original songs, embrace creativity: 4: Emerging Musician
Battle of the bands, first taste of competition: 3: Emerging Musician
section Building Presence
Gigging at local venues, building a fanbase: 4: Rising Star
Record demos, harness social media: 4: Rising Star
Crowdfunding for the first EP, fan engagement peaks: 3: Rising Star
section Breakthrough
Attract a music label, sign a deal: 5: Breakthrough Artist
Record in professional studios, first major album: 4: Breakthrough Artist
Nationwide tour, media coverage: 3: Breakthrough Artist
section Rock Star Status
Headline international tours, sell-out shows: 5: Rock Star
Win prestigious music awards, critical acclaim: 4: Rock Star
Influence the next generation of musicians, legacy established: 3: Rock Star
graph TD
FXMarket(Forex Market)
FXMarket --> Participants[Market Participants]
Participants -->|1| RetailTraders[Retail Traders]
Participants -->|2| InstitutionalTraders[Institutional Traders]
Participants -->|3| CentralBanks[Central Banks]
FXMarket --> DataAnalysis[Data Analysis & Tools]
DataAnalysis -->|1| TechnicalAnalysis[Technical Analysis]
DataAnalysis -->|2| FundamentalAnalysis[Fundamental Analysis]
DataAnalysis -->|3| SentimentAnalysis[Sentiment Analysis]
FXMarket --> TradingStrategies[Trading Strategies]
TradingStrategies -->|1| DayTrading[Day Trading]
TradingStrategies -->|2| Scalping[Scalping]
TradingStrategies -->|3| SwingTrading[Swing Trading]
TradingStrategies -->|4| PositionTrading[Position Trading]
FXMarket --> Execution[Execution]
Execution -->|1| Brokers[Brokers]
Execution -->|2| Platforms[Trading Platforms]
Execution -->|3| Orders[Order Types]
FXMarket --> RiskManagement[Risk Management]
RiskManagement -->|1| Leverage[Leverage & Margin]
RiskManagement -->|2| StopLoss[Stop Loss/Take Profit]
FXMarket --> Outcome[Outcome]
Outcome -->|1| Profits[Profits/Losses]
Outcome -->|2| StrategyAdjust[Strategy Adjustment]
classDef header fill:#f96,stroke:#333,stroke-width:2px;
classDef participants fill:#bbf,stroke:#333,stroke-width:1px;
classDef tools fill:#ffb,stroke:#333,stroke-width:1px;
classDef strategies fill:#bfb,stroke:#333,stroke-width:1px;
classDef execution fill:#fb9,stroke:#333,stroke-width:1px;
classDef risk fill:#fbb,stroke:#333,stroke-width:1px;
classDef outcome fill:#9bf,stroke:#333,stroke-width:1px;
class FXMarket header;
class Participants,DataAnalysis,TradingStrategies,Execution,RiskManagement,Outcome participants;
graph TD;
CEO[CEO] --> CTO[CTO];
CEO --> CFO[CFO];
CEO --> COO[COO];
CTO --> ITManager[IT Manager];
CTO --> DevLead[Development Lead];
ITManager --> SysAdmin[System Administrator];
DevLead --> Dev1[Developer 1];
DevLead --> Dev2[Developer 2];
CFO --> AccManager[Accounting Manager];
COO --> OpManager[Operations Manager];
graph TD;
CEO[Jane Doe<br>CEO] --> CTO[John Smith<br>CTO];
CEO --> CFO[Linda Lee<br>CFO];
CEO --> COO[Mike Brown<br>COO];
CTO --> ITManager[Alex Johnson<br>IT Manager];
CTO --> DevLead[Emily White<br>Development Lead];
ITManager --> SysAdmin[Chris Green<br>System Administrator];
ITManager --> NetEng[Sam Patel<br>Network Engineer];
DevLead --> Dev1[Robin Taylor<br>Developer];
DevLead --> Dev2[Jordan Casey<br>Developer];
CFO --> AccManager[Kim Wu<br>Accounting Manager];
AccManager --> Acc1[Sophia Martinez<br>Accountant];
AccManager --> Acc2[Oliver Hernandez<br>Accountant];
COO --> OpManager[Noah Wilson<br>Operations Manager];
OpManager --> HRManager[Emma Garcia<br>HR Manager];
HRManager --> HR1[Isabella Rodriguez<br>HR Specialist];
HRManager --> HR2[Mason Lee<br>HR Specialist];
COO --> LogManager[Lucas Anderson<br>Logistics Manager];
LogManager --> Log1[Charlotte Wong<br>Logistics Coordinator];
LogManager --> Log2[Ethan Kim<br>Logistics Coordinator];
graph TD;
MichaelScott[Michael Scott<br>Regional Manager] -->|Direct Report| JimHalpert[Jim Halpert<br>Salesman];
MichaelScott -->|Direct Report| DwightSchrute[Dwight Schrute<br>Salesman];
MichaelScott -->|Direct Report| PamBeesly[Pam Beesly<br>Receptionist];
MichaelScott -->|Direct Report| RyanHoward[Ryan Howard<br>Temp];
MichaelScott -->|Direct Report| AngelaMartin[Angela Martin<br>Head of Accounting];
MichaelScott -->|Direct Report| OscarMartinez[Oscar Martinez<br>Accountant];
MichaelScott -->|Direct Report| KevinMalone[Kevin Malone<br>Accountant];
MichaelScott -->|Direct Report| TobyFlenderson[Toby Flenderson<br>HR Representative];
MichaelScott -->|Direct Report| StanleyHudson[Stanley Hudson<br>Salesman];
MichaelScott -->|Direct Report| PhyllisVance[Phyllis Vance<br>Salesman];
MichaelScott -->|Direct Report| AndyBernard[Andy Bernard<br>Salesman];
MichaelScott -->|Direct Report| CreedBratton[Creed Bratton<br>Quality Assurance];
MichaelScott -->|Direct Report| MeredithPalmer[Meredith Palmer<br>Supplier Relations];
MichaelScott -->|Direct Report| KellyKapoor[Kelly Kapoor<br>Customer Service Rep];
MichaelScott -->|Direct Report| DarrylPhilbin[Darryl Philbin<br>Warehouse Foreman];
DarrylPhilbin --> RoyAnderson[Roy Anderson<br>Warehouse Staff];
DarrylPhilbin --> Madge[Madge<br>Warehouse Staff];
MichaelScott -->|Direct Report| JanLevinson[Jan Levinson<br>Corporate Manager];
PamBeesly -->|Later Promoted To| ErinHannon[Erin Hannon<br>Receptionist];
JimHalpert -->|Co-Manager Temporarily| CharlesMiner[Charles Miner<br>Vice President of Northeast Sales];
Conclusion
Mermaid is a powerful tool for creating diagrams directly within your Markdown documents. By learning its syntax and exploring different diagram types, you can enhance your documentation with visual elements that are easy to maintain and update. For more detailed information and advanced features, refer to the Mermaid Documentation.
Mermaid Syntax Guide
Mermaid allows you to create diagrams using text-based syntax. It's versatile and can be used for various types of diagrams. Here's a quick reference guide.
Basic Structure
Start a Mermaid diagram with triple backticks, followed by mermaid, and close with triple backticks.
graph TD;
A-->B;
Diagram Types
Flowchart
Use graph TD; (top-down), graph LR; (left-right), graph RL; (right-left), or graph BT; (bottom-top) to set direction.
graph TD;
A-->B;
B-->C;
C-->D;
Sequence Diagram
Defines how processes interact with each other.
sequenceDiagram;
participant A;
participant B;
A->>B: Request;
B->>A: Response;
Gantt Chart
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2022-01-01, 30d
Class Diagram
classDiagram
Class01 <|-- AveryLongClass : Inheritance
Class03 *-- Class04 : Association
Class05 .. Class06 : Aggregation
Class07 --|> Class08 : Composition
State Diagram
stateDiagram-v2
[*] --> Active
Active --> Inactive
Active --> [*]
Pie Chart
Pie charts are not supported in some versions of Mermaid. If your renderer supports them, the syntax usually looks like this, but it's less commonly used and might not work in all environments:
pie
title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rabbits" : 15
Styling
Apply styles using classDef and class.
graph TD;
A-->B;
classDef someclass fill:#f9f,stroke:#333,stroke-width:4px;
class A someclass;
Links
Add clickable links to nodes.
graph TD;
A-->B;
click A href "http://example.com" "Tooltip";
Use this guide as a starting point for creating your diagrams. Mermaid's syntax is powerful and flexible, allowing for complex and detailed visualizations.