Portfolio

Online FlowChart & Diagrams Editor - Mermaid Live Editor

Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript.

https://mermaid-js.github.io/mermaid-live-editor/edit/#eyJjb2RlIjoic2VxdWVuY2VEaWFncmFtXG4gICAgVXNlci0-PitDbGllbnQ6IOqyjOyLnOq4gCDrjJPquIAg7J6R7ISxIOyalOyyrVxuICAgIENsaWVudC0-PkFQSV9TZXJ2ZXI6IFBPU1QgL3Bvc3Qve2lkfS9yZXBseVxuICAgIE5vdGUgb3ZlciBDbGllbnQsIEFQSV9TZXJ2ZXI6IOqyjOyLnOq4gOyXkCDrjJPquIAg7J6R7ISxIO2VmOuKlCBBUElcbiAgICBBUElfU2VydmVyLT4-K1Bvc3Q6IO2VtOuLuSDqsozsi5zrrLwg7JqU7LKtXG4gICAgUG9zdC0tPj5BUElfU2VydmVyOiDsnZHri7Ug67CPIOyYiOyZuOyymOumrCAtIE5vdEZvdW5kXG4gICAgUG9zdC0-PitSZXBseTog64yT6riAIOyekeyEsSDsmpTssq1cbiAgICBSZXBseS0tPj5Qb3N0OiDtlbTri7kg64yT6riAIOydkeuLtVxuXG4gICAgbG9vcCDrjJPquIAg7IiYIOunjO2BvCDrsJjrs7VcbiAgICAgICAgUG9zdC0-PlBvc3Q6IOuCmOyXkOqyjCDrsJjrs7Ug7J6R7JeFXG4gICAgICAgIFBvc3QtPj5SZXBseTog64yT6riA7JeQ6rKMIOuwmOuztSDsnpHsl4VcbiAgICBlbmRcbiAgICBcbiAgICBQb3N0LT4-UG9zdDog7ZW064u5IOqyjOyLnOusvCDrjJPquIAg7IiYIOyXheuNsOydtO2KuFxuICAgIFBvc3QtLT4-Q2xpZW50OiDtlbTri7kg64yT6riAIOydkeuLtVxuICAgIENsaWVudC0-Pi1Vc2VyOiBVSSDsl4XrjbDsnbTtirgiLCJtZXJtYWlkIjoie1xuICBcInRoZW1lXCI6IFwiZGVmYXVsdFwiLFxuICBcInRoZW1lVmFyaWFibGVzXCI6IHtcbiAgICBcImJhY2tncm91bmRcIjogXCJ3aGl0ZVwiLFxuICAgIFwicHJpbWFyeUNvbG9yXCI6IFwiI0VDRUNGRlwiLFxuICAgIFwic2Vjb25kYXJ5Q29sb3JcIjogXCIjZmZmZmRlXCIsXG4gICAgXCJ0ZXJ0aWFyeUNvbG9yXCI6IFwiaHNsKDgwLCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSlcIixcbiAgICBcInByaW1hcnlCb3JkZXJDb2xvclwiOiBcImhzbCgyNDAsIDYwJSwgODYuMjc0NTA5ODAzOSUpXCIsXG4gICAgXCJzZWNvbmRhcnlCb3JkZXJDb2xvclwiOiBcImhzbCg2MCwgNjAlLCA4My41Mjk0MTE3NjQ3JSlcIixcbiAgICBcInRlcnRpYXJ5Qm9yZGVyQ29sb3JcIjogXCJoc2woODAsIDYwJSwgODYuMjc0NTA5ODAzOSUpXCIsXG4gICAgXCJwcmltYXJ5VGV4dENvbG9yXCI6IFwiIzEzMTMwMFwiLFxuICAgIFwic2Vjb25kYXJ5VGV4dENvbG9yXCI6IFwiIzAwMDAyMVwiLFxuICAgIFwidGVydGlhcnlUZXh0Q29sb3JcIjogXCJyZ2IoOS41MDAwMDAwMDAxLCA5LjUwMDAwMDAwMDEsIDkuNTAwMDAwMDAwMSlcIixcbiAgICBcImxpbmVDb2xvclwiOiBcIiMzMzMzMzNcIixcbiAgICBcInRleHRDb2xvclwiOiBcIiMzMzNcIixcbiAgICBcIm1haW5Ca2dcIjogXCIjRUNFQ0ZGXCIsXG4gICAgXCJzZWNvbmRCa2dcIjogXCIjZmZmZmRlXCIsXG4gICAgXCJib3JkZXIxXCI6IFwiIzkzNzBEQlwiLFxuICAgIFwiYm9yZGVyMlwiOiBcIiNhYWFhMzNcIixcbiAgICBcImFycm93aGVhZENvbG9yXCI6IFwiIzMzMzMzM1wiLFxuICAgIFwiZm9udEZhbWlseVwiOiBcIlxcXCJ0cmVidWNoZXQgbXNcXFwiLCB2ZXJkYW5hLCBhcmlhbFwiLFxuICAgIFwiZm9udFNpemVcIjogXCIxNnB4XCIsXG4gICAgXCJsYWJlbEJhY2tncm91bmRcIjogXCIjZThlOGU4XCIsXG4gICAgXCJub2RlQmtnXCI6IFwiI0VDRUNGRlwiLFxuICAgIFwibm9kZUJvcmRlclwiOiBcIiM5MzcwREJcIixcbiAgICBcImNsdXN0ZXJCa2dcIjogXCIjZmZmZmRlXCIsXG4gICAgXCJjbHVzdGVyQm9yZGVyXCI6IFwiI2FhYWEzM1wiLFxuICAgIFwiZGVmYXVsdExpbmtDb2xvclwiOiBcIiMzMzMzMzNcIixcbiAgICBcInRpdGxlQ29sb3JcIjogXCIjMzMzXCIsXG4gICAgXCJlZGdlTGFiZWxCYWNrZ3JvdW5kXCI6IFwiI2U4ZThlOFwiLFxuICAgIFwiYWN0b3JCb3JkZXJcIjogXCJoc2woMjU5LjYyNjE2ODIyNDMsIDU5Ljc3NjUzNjMxMjglLCA4Ny45MDE5NjA3ODQzJSlcIixcbiAgICBcImFjdG9yQmtnXCI6IFwiI0VDRUNGRlwiLFxuICAgIFwiYWN0b3JUZXh0Q29sb3JcIjogXCJibGFja1wiLFxuICAgIFwiYWN0b3JMaW5lQ29sb3JcIjogXCJncmV5XCIsXG4gICAgXCJzaWduYWxDb2xvclwiOiBcIiMzMzNcIixcbiAgICBcInNpZ25hbFRleHRDb2xvclwiOiBcIiMzMzNcIixcbiAgICBcImxhYmVsQm94QmtnQ29sb3JcIjogXCIjRUNFQ0ZGXCIsXG4gICAgXCJsYWJlbEJveEJvcmRlckNvbG9yXCI6IFwiaHNsKDI1OS42MjYxNjgyMjQzLCA1OS43NzY1MzYzMTI4JSwgODcuOTAxOTYwNzg0MyUpXCIsXG4gICAgXCJsYWJlbFRleHRDb2xvclwiOiBcImJsYWNrXCIsXG4gICAgXCJsb29wVGV4dENvbG9yXCI6IFwiYmxhY2tcIixcbiAgICBcIm5vdGVCb3JkZXJDb2xvclwiOiBcIiNhYWFhMzNcIixcbiAgICBcIm5vdGVCa2dDb2xvclwiOiBcIiNmZmY1YWRcIixcbiAgICBcIm5vdGVUZXh0Q29sb3JcIjogXCJibGFja1wiLFxuICAgIFwiYWN0aXZhdGlvbkJvcmRlckNvbG9yXCI6IFwiIzY2NlwiLFxuICAgIFwiYWN0aXZhdGlvbkJrZ0NvbG9yXCI6IFwiI2Y0ZjRmNFwiLFxuICAgIFwic2VxdWVuY2VOdW1iZXJDb2xvclwiOiBcIndoaXRlXCIsXG4gICAgXCJzZWN0aW9uQmtnQ29sb3JcIjogXCJyZ2JhKDEwMiwgMTAyLCAyNTUsIDAuNDkpXCIsXG4gICAgXCJhbHRTZWN0aW9uQmtnQ29sb3JcIjogXCJ3aGl0ZVwiLFxuICAgIFwic2VjdGlvbkJrZ0NvbG9yMlwiOiBcIiNmZmY0MDBcIixcbiAgICBcInRhc2tCb3JkZXJDb2xvclwiOiBcIiM1MzRmYmNcIixcbiAgICBcInRhc2tCa2dDb2xvclwiOiBcIiM4YTkwZGRcIixcbiAgICBcInRhc2tUZXh0TGlnaHRDb2xvclwiOiBcIndoaXRlXCIsXG4gICAgXCJ0YXNrVGV4dENvbG9yXCI6IFwid2hpdGVcIixcbiAgICBcInRhc2tUZXh0RGFya0NvbG9yXCI6IFwiYmxhY2tcIixcbiAgICBcInRhc2tUZXh0T3V0c2lkZUNvbG9yXCI6IFwiYmxhY2tcIixcbiAgICBcInRhc2tUZXh0Q2xpY2thYmxlQ29sb3JcIjogXCIjMDAzMTYzXCIsXG4gICAgXCJhY3RpdmVUYXNrQm9yZGVyQ29sb3JcIjogXCIjNTM0ZmJjXCIsXG4gICAgXCJhY3RpdmVUYXNrQmtnQ29sb3JcIjogXCIjYmZjN2ZmXCIsXG4gICAgXCJncmlkQ29sb3JcIjogXCJsaWdodGdyZXlcIixcbiAgICBcImRvbmVUYXNrQmtnQ29sb3JcIjogXCJsaWdodGdyZXlcIixcbiAgICBcImRvbmVUYXNrQm9yZGVyQ29sb3JcIjogXCJncmV5XCIsXG4gICAgXCJjcml0Qm9yZGVyQ29sb3JcIjogXCIjZmY4ODg4XCIsXG4gICAgXCJjcml0QmtnQ29sb3JcIjogXCJyZWRcIixcbiAgICBcInRvZGF5TGluZUNvbG9yXCI6IFwicmVkXCIsXG4gICAgXCJsYWJlbENvbG9yXCI6IFwiYmxhY2tcIixcbiAgICBcImVycm9yQmtnQ29sb3JcIjogXCIjNTUyMjIyXCIsXG4gICAgXCJlcnJvclRleHRDb2xvclwiOiBcIiM1NTIyMjJcIixcbiAgICBcImNsYXNzVGV4dFwiOiBcIiMxMzEzMDBcIixcbiAgICBcImZpbGxUeXBlMFwiOiBcIiNFQ0VDRkZcIixcbiAgICBcImZpbGxUeXBlMVwiOiBcIiNmZmZmZGVcIixcbiAgICBcImZpbGxUeXBlMlwiOiBcImhzbCgzMDQsIDEwMCUsIDk2LjI3NDUwOTgwMzklKVwiLFxuICAgIFwiZmlsbFR5cGUzXCI6IFwiaHNsKDEyNCwgMTAwJSwgOTMuNTI5NDExNzY0NyUpXCIsXG4gICAgXCJmaWxsVHlwZTRcIjogXCJoc2woMTc2LCAxMDAlLCA5Ni4yNzQ1MDk4MDM5JSlcIixcbiAgICBcImZpbGxUeXBlNVwiOiBcImhzbCgtNCwgMTAwJSwgOTMuNTI5NDExNzY0NyUpXCIsXG4gICAgXCJmaWxsVHlwZTZcIjogXCJoc2woOCwgMTAwJSwgOTYuMjc0NTA5ODAzOSUpXCIsXG4gICAgXCJmaWxsVHlwZTdcIjogXCJoc2woMTg4LCAxMDAlLCA5My41Mjk0MTE3NjQ3JSlcIlxuICB9XG59IiwidXBkYXRlRWRpdG9yIjpmYWxzZSwiYXV0b1N5bmMiOnRydWUsInVwZGF0ZURpYWdyYW0iOmZhbHNlfQ

코드


sequenceDiagram
    User->>+Client: 게시글 댓글 작성 요청
    Client->>API_Server: POST /post/{id}/reply
    Note over Client, API_Server: 게시글에 댓글 작성 하는 API
    API_Server->>+Post: 해당 게시물 요청
    Post-->>API_Server: 응답 및 예외처리 - NotFound
    Post->>+Reply: 댓글 작성 요청
    Reply-->>Post: 해당 댓글 응답

    loop 댓글 수 만큼 반복
        Post->>Post: 나에게 반복 작업
        Post->>Reply: 댓글에게 반복 작업
    end
    
    Post->>Post: 해당 게시물 댓글 수 업데이트
    Post-->>Client: 해당 댓글 응답
    Client->>-User: UI 업데이트

Request


{
  content: String,
  userId: String
}

Response


{
  id: String,
  content: String,
  userId: String,
  createAt: Date
}

댓글 작성 API 예제

Request

Response