Hike News
Hike News

mermaid의 간단한 사용법

ChatGPT, mermaid

Person:

  • markdown mermaid 예제 10개만 보여주세요

ChatGPT:

  • Sure, here are 10 Markdown Mermaid examples for you:
  1. Flowchart:
1
2
3
4
5
6
7

```mermaid
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
  1. Sequence Diagram:
1
2
3
4
5

```mermaid
sequenceDiagram
  Alice->>Bob: Hello Bob, how are you?
  Bob-->>Alice: Hi Alice, I'm good. Thanks!
1
2


  1. Class Diagram:
1
2
3
4
5
6
7

```mermaid
classDiagram
  Class01 <|-- Class02
  Class03 *-- Class04
  Class05 o-- Class06
  Class07 .. Class08
1
2


  1. State Diagram:
1
2
3
4
5
6
7
8
9

```mermaid
stateDiagram
  [*] --> State1
  State1 --> State2
  State1 --> State3
  State2 --> State3
  State3 --> State1
  State3 --> [*]
1
2


  1. Gantt Chart:
1
2
3
4
5
6
7
8
9

```mermaid
gantt
  title Project Timeline
  section Task A
  Task 1: 2023-08-01, 2d
  Task 2: 2023-08-03, 3d
  section Task B
  Task 3: 2023-08-06, 4d
1
2


  1. Pie Chart:
1
2
3
4
5
6
7
8

```mermaid
pie
  title Expenses
  "Food" : 40
  "Rent" : 20
  "Utilities" : 10
  "Entertainment" : 30
1
2


  1. ER Diagram:
1
2
3
4
5
6
7
8
9
10
11
12

```mermaid
erDiagram
  ENTITY01 { 
    id INT
    name VARCHAR
  }
  ENTITY02 {
    id INT
    age INT
  }
  ENTITY01 ||..|| ENTITY02 : has
1
2


  1. User Journey:
1
2
3
4
5
6
7
8
9
10
11
12

```mermaid
journey
  title My User Journey
  section Homepage
    This is the homepage of the website.
  section "Login / Register"
    This section is for user authentication.
  section Dashboard
    This section displays user data after login.
  section "Purchase Item"
    Users can purchase items in this section.
1
2


  1. Radial Tree:
1
2
3
4
5
6
7
8
9
10
11

```mermaid
%% Example using radial tree
%% https://github.com/mermaid-js/mermaid
%% :auto-coordinates: true
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[Car]
1
2


  1. Entity Relationship Diagram (ERD):
1
2
3
4
5

```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE-ITEM : contains
1
2

Please note that for these examples to render correctly, you'll need a Markdown Mermaid plugin or a platform that supports Mermaid diagrams.

Person:

  • mindmap 예제도 보여주8ㅔ쇼

ChatGPT:

  • Sure, here’s a Mindmap example using Markdown Mermaid:
1
2
3
4
5
6
7
8
9
10

```mermaid
graph LR
    A[Main Topic] --> B(Subtopic 1)
    A --> C(Subtopic 2)
    A --> D(Subtopic 3)
    B --> E(Sub-subtopic 1)
    B --> F(Sub-subtopic 2)
    C --> G(Sub-subtopic 3)
    C --> H(Sub-subtopic 4)
1
2

This example shows a simple mind map with a main topic "Main Topic" and three subtopics "Subtopic 1", "Subtopic 2", and "Subtopic 3". Each subtopic has two sub-subtopics. You can customize this mind map with your own content and structure.