개요

Atom( htps : // 나중에 m. 이오/ )에서 텍스트에서 이런 그림을 써 보자.

계기

조금 큰 규모의 개발이 되었을 때, 머리가 이상해질 것 같아서 일단 출력하려고 하는 것으로
드로잉 툴을 찾고 있으면 평상시 이용하고 있는 에디터의 Atom에서 UML 같은 것의 쓸 수 있다는 것이 되었습니다.

배포 도구

아톰

설명이 필요없는 편집기입니다. => htps : // 나중에 m. 이오/

plantuml-viewer

atom 플러그인 plantuml-viewer를 사용합니다.
사용하기 위해

java

Graphviz

필요합니다. 아래의 기사가 상세합니다.
참고 : 텍스트 입력으로 UML을 실시간 미리보기해주는 도구(plantuml-viewer:Atom 플러그인) - Qiita

language-plantuml

PlantUML 지원을 위해 위의 atom 플러그인도 넣었습니다.

사용해보기

PlantUML - 시퀀스 다이어그램 | 프로그래머 잡기장 사이트를 보면서
자신이 원하는 듯한 요소를 손잡고 먹어 써 본 것이 위의 그림입니다.

실제 코드

첫 번째 이미지의 클래스 같은 그림의 코드입니다.

title クラスっぽい図

class User {
  name
  age
}

class Email {
  address
  user_id
}

class Phone {
  number
  user_id
}

User..Email
User..Phone

두 번째 이미지의 코드입니다.

title 悲しい恋模様

==出会い==

note over man: 渋谷にでかける
note over woman: 渋谷にでかける
man->woman: 街中でたまたま見かけて一目惚れ
woman-->man: 記憶にない

loop 7日間
  man->man: 思い巡らす 
end

note over man: 合わない時間が気持ち高ぶらせる

==再会==

man->woman: 「好きだ」
woman->man: 「だれ？」

alt 頑張る？
  man->woman: デートに誘う
  woman->man: だが、断る
else
  man->man: 次の手を考える
  note over man:諦める
end

note over man: 終了
==失恋==

어쩐지 아까의 그림과 비교해 보면, 어쩐지 어느 것이 어느 근처인가 검토가 붙지요.
atom에서는 코드 구문을 PlantUML로 한 상태에서 오른쪽 클릭하면 Toggle Plantunl-viewer 라는 메뉴가 나옵니다.
그것을 선택하면 이하의 화면과 같이 되어, 리얼타임에 반영되기 때문에 굉장히 알기 쉽습니다.

조금 해설

진짜 앞의 링크를 잡아 먹어 보면 간단히 쓸 수 있습니다만, 예를 들면

제목

특별히 설명할 필요는 없지만 아래와 같습니다.

title <設定したいタイトル>

note

note <位置> <基準要素>
位置: 要素に対してどこに置くか => over left rightなど
基準要素: 上の例だとman womanみたいなやつ。両方にかぶせるようにとかもできる

전환

<要素> -> <要素>
例: man->woman

--> にすると点線になる

이것도 엄청 알기 쉽습니다만, 요소로부터 요소에 선을 당기기만 하면 됩니다.<- 그러면 반대 방향으로 선이 그어졌습니다.

구분선

==<テキスト>==

이런 슬픈 구분선 쓰지 않겠지요. . . 그런 느낌입니다.

그 밖에도 쓰는 방법이 있고, 그림의 형식에 따라 쓰는 방법도 바뀌거나 합니다.
참조 쪽이 올바르게 충실하다고 생각하므로 그쪽을 참조해 보세요.

참고 : htp : //p ㅁㅁㅁml. 코m/

저장

토글한 탭에서 png로 저장하면 OK.
(내 환경이라면 uml을 쓰는 사람에게 파일 이름을 붙이지 않으면 오류가 발생합니다)

장점

이미지로 만들면 고치기가 귀찮습니다

문자열이 되기 때문에 차이라든지 볼 수 있어 관리가 편하다

요소나 멋대로 늘려주고, 배치라든지 멋대로 해 주기 때문에 편하게

걱정

색 바꿀 수 있을까(노란색과 빨강은 조금...)

조금 배치 바꾸고 싶다든가 할 수 있을까 ...

오류가 뚝뚝 떨어지는 (무시).

사이고에게

이번에 만들어 보면 자신의 머리를 정리하기도 하고, 사람과 공유할 때 그림이 있다는 것은
齟齬가 없어질 것 같습니다 매우 좋다고 생각했습니다.
WEB서비스로 이런 툴이 있는데는 있습니다만, atom을 만약 사용하고 있다면
일단 시도하는 것이 좋을 것 같습니다.