최근 AI와 함께 개발하는 과정에서 시스템 구조나 작업 흐름을 Mermaid 차트로 확인하는 일이 많아지고 있습니다.

OKKY에서도 개발자분들이 이런 차트를 게시글에 바로 올리고, 구조와 흐름을 함께 보며 이야기할 수 있도록 에디터에 Mermaid 기능을 추가합니다.

복잡한 내용을 텍스트로 간단히 작성하고, 다이어그램으로 바로 확인해 보세요.

곧 공개됩니다.

Basic Pie Chart

pie title OKKY
         "Cluade" : 50
         "Codex" : 30
         "Gemini" : 5
         "기타": 5

Basic sequence diagram

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

A commit flow diagram.

gitGraph:
    commit id:"강남역"
    branch newbranch
    checkout newbranch
    commit id:"선정릉역"
    commit tag:"OKKY"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

Kanban Diagram

---
config:
  kanban:
    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'
---
kanban
  Todo
    [OKKY 통합 검색 개편 홍보 자료 게시]
    docs[OKKY 캘린더 서비스 화면설계]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]