structure updates
This commit is contained in:
484
tech_docs/Mermaid.md
Normal file
484
tech_docs/Mermaid.md
Normal file
@@ -0,0 +1,484 @@
|
||||
```mermaid
|
||||
graph TD
|
||||
CEO[Jane Doe<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:
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class MyClass {
|
||||
+publicMethod()
|
||||
-privateMethod()
|
||||
}
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
Mermaid allows you to customize your diagrams with styles and colors.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
style A fill:#f9f,stroke:#333,stroke-width:4px
|
||||
style B fill:#bbf,stroke:#f66,stroke-width:2px
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
gitGraph
|
||||
commit
|
||||
commit
|
||||
branch develop
|
||||
commit
|
||||
commit
|
||||
commit
|
||||
checkout main
|
||||
commit
|
||||
commit
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```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]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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;
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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];
|
||||
```
|
||||
---
|
||||
|
||||
```mermaid
|
||||
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](https://mermaid-js.github.io/mermaid/#/).
|
||||
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
B-->C;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
### Sequence Diagram
|
||||
|
||||
Defines how processes interact with each other.
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram;
|
||||
participant A;
|
||||
participant B;
|
||||
A->>B: Request;
|
||||
B->>A: Response;
|
||||
```
|
||||
## Gantt Chart
|
||||
|
||||
```mermaid
|
||||
gantt
|
||||
title A Gantt Diagram
|
||||
dateFormat YYYY-MM-DD
|
||||
section Section
|
||||
A task :a1, 2022-01-01, 30d
|
||||
```
|
||||
|
||||
## Class Diagram
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
Class01 <|-- AveryLongClass : Inheritance
|
||||
Class03 *-- Class04 : Association
|
||||
Class05 .. Class06 : Aggregation
|
||||
Class07 --|> Class08 : Composition
|
||||
```
|
||||
|
||||
## State Diagram
|
||||
|
||||
```mermaid
|
||||
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:
|
||||
|
||||
```mermaid
|
||||
pie
|
||||
title Pets adopted by volunteers
|
||||
"Dogs" : 386
|
||||
"Cats" : 85
|
||||
"Rabbits" : 15
|
||||
```
|
||||
|
||||
## Styling
|
||||
|
||||
Apply styles using `classDef` and `class`.
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
classDef someclass fill:#f9f,stroke:#333,stroke-width:4px;
|
||||
class A someclass;
|
||||
```
|
||||
|
||||
## Links
|
||||
|
||||
Add clickable links to nodes.
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
Reference in New Issue
Block a user