Mermaid?! 인어인가?

아래 코드 코드 섹션에 사용하면 노션에서는 아래 이미지를 생성해준다.

(velog에서는 안 되는게 함정)

graph LR
    A(Service Integration Server) <--> B(Micro Server Type 1)
    A(Service Integration Server) <--> C(Micro Server Type 2)
    A(Service Integration Server) <--> D(Micro Server Type 3)
    A(Service Integration Server) <--> E(Micro Server Type 4)
    A(Service Integration Server) <--> F(Micro Server Type 5)
    A(Service Integration Server) <--> G(More Micro Services...)
    H(Application/Server Object) <--> A(Service Integration Server)

ChatGPT 도와줘!

Mermaid is a JavaScript-based diagramming and charting tool that allows you to visualize data and processes in Markdown documents by writing diagrams directly in the Markdown syntax. It is particularly useful for creating flowcharts, sequence diagrams, Gantt charts, and other diagrams to illustrate complex processes, workflows, or architectures without needing a separate drawing tool.

Key Features of Mermaid:

• Flowcharts: Visualize workflows, decision trees, and processes.
• Sequence diagrams: Depict interactions between different entities over time.
• Gantt charts: Show project timelines, tasks, and progress.
• Class diagrams: Represent object-oriented programming structures.
• State diagrams: Model the states of a system or object and their transitions.
• Pie charts: Display statistical data in a simple and clean format.

General Usage:

You can embed Mermaid code blocks within Markdown files. The syntax is wrapped in a fenced code block with the language identifier mermaid, and inside this block, you define the diagram structure in Mermaid syntax.

Examples of Common Diagrams:

1. Flowchart: Flowcharts are used to represent decision-making paths or processes.

graph TD
    A[Start] --> B{Decision?}
    B -->|Yes| C[Task 1]
    B -->|No| D[Task 2]
    C --> E[End]
    D --> E[End]

• graph TD stands for "top-down" flow. You can also have LR (left-to-right) or BT (bottom-to-top) graphs.

2. Sequence Diagram: Sequence diagrams show how objects or processes interact with each other in a sequence of steps.

sequenceDiagram
    participant A as User
    participant B as Server
    A->>B: Request data
    B->>A: Respond with data

• Sequence diagrams are great for showing interactions between components, such as client-server interactions.

3. Gantt Chart: Gantt charts are used for project planning, showing tasks over time.

gantt
    title Project Timeline
    dateFormat  YYYY-MM-DD
    section Phase 1
    Task 1 :done,    des1, 2024-10-01,2024-10-05
    Task 2 :active,  des2, 2024-10-06, 5d
    section Phase 2
    Task 3 :         des3, 2024-10-10, 3d
    Task 4 :         des4, 2024-10-13, 4d

• Gantt charts provide a visual way to track progress over time, including tasks and phases.

4. Class Diagram: Class diagrams are used to represent object-oriented programming classes and their relationships.

classDiagram
    class Animal {
        +String name
        +int age
        +makeSound()
    }
    class Dog {
        +String breed
        +bark()
    }
    Animal <|-- Dog

• Class diagrams are ideal for documenting code structures.

5. State Diagram: State diagrams are used to represent the states of an object or system and the transitions between those states.

stateDiagram
    [*] --> Idle
    Idle --> Running: Start
    Running --> Idle: Stop
    Running --> Finished: Complete
    Finished --> [*]

• State diagrams can be used to model system states, such as a machine’s life cycle.

6. Pie Chart: Pie charts are used to show parts of a whole.

pie
    title Browser market share 2024
    "Chrome" : 64.25
    "Firefox" : 12.38
    "Edge" : 9.61
    "Safari" : 9.47
    "Others" : 4.29

General Workflow Using Mermaid:

1. Write Mermaid syntax within a Markdown code block

graph TD
A --> B

2. Render the Markdown document using a tool that supports Mermaid, such as GitHub, GitLab, or Markdown editors like Obsidian or Typora with Mermaid integration.

When to Use Mermaid:

• Visualizing workflows, processes, or decision paths.
• Depicting software architecture, data flow, or API interactions.
• Planning projects or tasks with Gantt charts.
• Creating UML (Unified Modeling Language) diagrams for software development.
• Generating quick and simple data visualizations like pie charts.

Mermaid simplifies the process of adding diagrams to Markdown files, making documentation more engaging and easy to understand.

요긴하게 써먹어 봅시다~!