PlantUML을 사용해 보았습니다.

소개

본 기사는 PlantUML을 조금 만져보고 어땠는지를 쓴 기사입니다.
실제의 기법등은 나도 참고로 하고 있는 치트 시트의 기사나 공식 사이트등을 봅시다. (참고 링크에 있습니다)
React.js의 구성 요소 간의 상호 작용을 클래스 다이어그램과 시퀀스 다이어그램에 결합하고 싶었고 PlantUML에 갔습니다.
자신이 지금까지 사용한 것은 앞에서 언급했듯이 클래스 다이어그램과 시퀀스 다이어그램뿐이므로 그들에 대해서만 언급합니다.

사용해보십시오.

PlantUML 관련 기사에서 자주 보지만, 역시 큰 강점이라는 것은 이 두 가지가 될 것입니다.

텍스트로 기술하기 때문에, git등으로 관리하기 쉽다

세부 레이아웃 조정이 필요하지 않습니다

PlantUML 외에 astahUML도 사용해 보았습니다만, 레이아웃 조정의 필요가 없는 것은 크다.
텍스트로 작성되었기 때문에 조금 익숙해지는 것이 필요하다고 느꼈습니다. 클래스 다이어그램은 그렇지 않습니다만, 시퀀스 다이어그램은 라이프 라인의 쓰는 방법으로 처음 조금 곤란했습니다.

그림을 쓰는 방법이 푹신 푹신합니다만, 사용하기 시작한 시점에서의 기사이므로, 용서해 주십시오.

클래스 다이어그램

@startuml
title class diagram

class List {
    + items: array
    - total: number
}

class ListRow {
    + isChecked: boolean
    + name: string
    + position: number
}

List o--> ListRow

@enduml

이런 식으로 클래스 다이어그램을 만들 수 있습니다.
처음에는 "-"는 private, "+"는 public이 되어 있으면 최소한 전해질까 생각합니다. 클래스끼리를 연결하는 선에 대해서는 공식이 예쁘게 정리해 줍니다.

시퀀스 다이어그램

@startuml
title Edit List

participant List

-> List: toggleCheck()
    activate List
List -> ListRow: onChangeCheck()
    activate ListRow
deactivate ListRow
deactivate List

-> List: changeName()
    activate List
List -> ListRow: onChangeInput()
    activate ListRow
ListRow -> ListRow: validateName()
    activate ListRow()
    note right: 異常値の場合はエラーメッセージがセットされる
deactivate ListRow
deactivate ListRow
deactivate Row

-> List: changePosition()
    activate List
List -> ListRow: onPressArrowButton()
    activate ListRow
deactivate ListRow
deactivate List

@enduml

이런 식으로 시퀀스 다이어그램을 만들 수 있습니다.
여기에서는 라이프 라인을 많이 사용하고 있습니다. 조금 버릇이 있습니다만, 사용하면 보기 쉬운 그림을 만들 수 있습니다.

참고 링크

공식
htps : // p ぁつつ ml. 코 m/그럼/

치트 시트 기사
h tps:// 퀵했다. 작은 m / 턱 Mr / MS / 0b5C4 7f38fd1482 48

도입에 관한 기사(조금 낡습니다만, 지금도 이것으로 도입할 수 있습니다)
htps : // 코 m / 코지 / ms / 9에서 db834c5, f09 에어 7b2