플로우 다이어그램 (UML 시퀀스 다이어그램)도 코드로 작성하고 관리하고 싶습니다 (atom + mermaid.js)

2837 단어 mermaid.jsATOMuml

플로우 다이어그램 (시퀀스 다이어그램)도 코드로 작성하고 관리하고 싶습니다 (atom + mermaid.js)



전치


  • 비즈니스 플로우 차트 등을 작성할 수 있습니까?
  • 도구는 무엇으로 작성되고 작성됩니까?
  • MS Excel?
  • MS Visio?
  • astah community edition이라는 무료 UML 모델링 도구도 있습니다.
  • h tp // // s s h. 찬게-ゔぃ시온. 코 m/쟈/p 로즈 ct/아 s타 h 콧무에 ty. HTML


    • 목적



    운영 문서도 Infrastructure as Code


  • 1. 엑셀로 열심히 플로우도 썼다
  • 2. "저기는 이렇게 바꾸고, 여기는 이렇게 바꿔라. 고마워."
  • 3. 도형을 드래그 앤 드롭하여…

    GUI 귀찮아!

    코드 기반의 이점


  • git 등으로 버전 관리 (차등 관리) 할 수 있습니다
  • 변경도 에디터상에서 캐릭터 라인 편집하는 것으로 가능

    • 결론



    코드베이스로 시퀀스 다이어그램을 작성할 수있는 도구가 있습니다.



    atom + mermaid.js

    atom


  • htps : // 나중에 m. 이오/
  • htps : // 그럼.ぃきぺぢ아. 오 rg/우우키/다음 m_(%에3%83%86%에3%82%아D%에3%82%B9%에3%83%88%에3%82%에8%에3%83 %87%에3%82%아3%에3%82%BF)

    • mermaid.js


  • htp // kn sv. 기주 b. 이오/메 r마이 d/
  • htps : // 나중에 m. 이오 / Pac 게이 s / 나중에 me r 마이 d
  • 시퀀스 다이어그램 이외에도 쓸 수 있습니다

    • 환경


  • MacOS Sierra
  • Atom 1.13.0 x64

    • 설치 방법


  • atom이 도입되었다면 + install 하는 것



    • 사용하는 방법


  • mermaid docs 의 샘플을 참고로 합시다
  • htp // kn sv. 기주 b. 이오 / 메 r 마이 d / # 세쿠 엔세 - ぢ g ms6 

    • %% Example of sequence diagram
sequenceDiagram
    participant 依頼者
    participant 運用担当
    participant リーダー
    依頼者->>+運用担当: よさげなサーバーこさえてよ!
    運用担当-->>-依頼者: そんな簡単に出来るかぼけぇ!!!
    activate 依頼者
    依頼者->>+運用担当: そんなこと言わずに
    deactivate 依頼者
    運用担当-->>+リーダー: 下々がこんなこと言ってます
    リーダー->>-運用担当: 仕方ない、やってやれ
    運用担当-->>-依頼者: いいって、ほらよ



    끝

    [SE를 위한 그림 기술] 학습 메모
    Atom에서 플로우 그림 같은 것을 씁니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage