Nomnoml: 텍스트 문법으로 그리는 UML 다이어그램

 (nomnoml.com)
2P by GN⁺ | ★ favorite | 댓글 1개
  • UML 다이어그램을 코드처럼 작성하는 도구로, 왼쪽의 텍스트 문법을 수정하면 렌더링된 다이어그램이 함께 바뀜
  • 클래스, 컴포넌트, 플로차트, 유스케이스, 데이터베이스·테이블 등 여러 다이어그램 요소와 관계선 표기를 지원함
  • 편집 내용은 브라우저 localStorage에 저장되어 다음 방문 때 남아 있을 수 있지만, 저장이 보장되지는 않음
  • 캔버스는 오른쪽 1/3 영역에서 드래그와 스크롤로 이동·확대/축소할 수 있고, 편집기는 Sublime Text 키 매핑 일부를 지원함
  • # 지시어와 . 스타일 지시어로 글꼴, 방향, 간격, 색상, 선 모양, 사용자 정의 분류자 스타일을 조정할 수 있음

텍스트 문법으로 구성하는 다이어그램

  • Nomnoml은 텍스트 기반 문법으로 다이어그램을 작성하고 렌더링하는 도구임

  • 관계선 표기

    • association, dependency, generalization, implementation, composition, aggregation, ball and socket, note, hidden 등을 사용할 수 있음
    • 예: [Car]->[Engine]
    • 예: [Car] +-> 0..* [RustPatch]
    • 예: [Car]o->[Manufacturer]
    • 예: [Car]<:-[Pickup]

  • 지원 분류자

    • 클래스 다이어그램은 기본 클래스와 함께 abstract, instance, reference, package, frame을 지원함
    • 컴포넌트 다이어그램에서는 socket, lollipop 표기를 쓸 수 있음
    • 플로차트 요소로는 start, end, state, choice, sync, input, sender, receiver, transceiver가 있음
    • 유스케이스 다이어그램은 actor, usecase를 지원함
    • 기타 요소로 note, label, hidden, database, pipe, table을 사용할 수 있음
      • 테이블 예시는 [<table>Fruits| Apples | 17 || Oranges | 4711] 형태임

편집, 지시어, 스타일

  • 줄 시작의 //는 주석으로 처리됨
    • [not //commented]처럼 줄 중간의 //는 주석이 아님
  • id 속성을 쓰면 표시 이름이 같은 두 노드를 서로 다른 노드로 만들 수 있음
    • 예: [<actor id=a>User], [<actor id=b>User], [a] -- [b]

  • # 지시어로 레이아웃과 렌더링 조정

    • #import: filename
    • #direction: down | right
    • #edges: hard | rounded
    • #background: transparent
    • #font, #fontSize, #spacing, #padding, #stroke, #fill, #zoom
    • #ranker: network-simplex | tight-tree | longest-path

  • . 지시어로 분류자 스타일 정의

    • 예: #.box: fill=#8f8 dashed
    • 예: #.blob: visual=ellipse title=bold
    • fill, stroke, align, direction, visual 같은 키/값을 사용할 수 있음
    • title=left,italic,bold, body=center,italic,bold처럼 제목과 본문 텍스트 스타일을 지정 가능함
    • 사용 예시는 글꼴 변경, 촘촘한 레이아웃, 테이블 작성, 사용자 정의 스타일, 여러 파일 분할을 포함함
    • 여러 파일 분할은 #import: blobby_styles 형태를 사용함
    • 편집 화면의 변경 사항은 브라우저 localStorage에 저장되며, 캔버스는 오른쪽 1/3 영역에서 드래그와 스크롤로 이동·확대/축소할 수 있음
    • 편집기는 Sublime Text 키 매핑 일부를 지원하며, Nomnoml은 GitHub에 호스팅되어 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • GitHub 링크: https://github.com/skanaar/nomnoml

  • 처음엔 꽤 혼란스러웠고, about 버튼을 찾고 나서야 이해됐음
    UML을 한눈에 알아보지 못한다는 점에서 운 좋게 살아온 건지도 모르겠음. 처음엔 가짜 해적 말투 문법 같은 걸 설명하는 줄 알았음

    • UML을 알아보는 방법은 아무도 기억 못 하는 화살표 스타일이 잔뜩 나온다는 점임. 그게 UML이 널리 자리 잡지 못한 주된 이유라고 90%쯤 확신함
      가끔 UML 다이어그램을 읽으려고 화살표 10종을 외우는 사람은 없다는 사실을 인정한 이런 방식이 훨씬 낫다고 봄: https://buck2.build/docs/concepts/concept_map/
    • 이건 엄밀히 말하면 표준 UML은 아닌 것 같음
      다만 “UML”이라는 말을 쓰는 도구 상당수가 그렇고, 실제로는 이론적인 UML보다 덜 정밀하고 덜 장황한 무언가가 필요한 경우도 많음

  • 예전에 “텍스트를 다이어그램으로” 변환하는 도구들을 비교한 오픈소스 사이트가 있었음: https://text-to-diagram.com/
    nomnoml은 목록에 없음

    • 그 사이트는 D2 유지보수자들이 만든 거라 편향이 있을 수 있지만, 그래도 D2 문법이 nomnoml까지 포함해 이 계열 중 가장 친근하다고 봄
      [1]: https://d2lang.com/

  • Nomnoml을 좋아함. 최근엔 작업 중인 브라우저 기반 개인 지식 관리(PKM) 프로젝트에서 계층형 태그 구조를 시각화하는 데 쓰고 있음
    레이아웃이 꽤 깔끔하게 나오는 편임. 예시: https://imgbox.com/9A1mDyNv

  • 모바일 쪽은 손볼 필요가 있어 보임. 휴대폰에서 열었더니 다이어그램이 편집기 위에 그려져서 편집기를 사용할 수 없었음

    • 그건 nomnoml 데모 웹사이트의 동작일 뿐임. 텍스트를 편집하면 렌더링된 UML 다이어그램이 실시간으로 바뀌는 걸 보여주려는 구성임
      밑단의 JavaScript 라이브러리는 HTML canvas나 Node.js 프로그램에서 SVG로 바로 렌더링할 수 있고, 원하면 명령줄에서도 실행 가능함

  • 예전에 nomnoml로 몇 가지 도구를 만들었고, GPU 어셈블리 코드의 제어 흐름 그래프와 의존성 그래프도 포함됐음
    정말 마음에 들었지만, 특정 요소들을 서로 가깝게 배치하도록 안정적으로 강제할 방법이 없다는 점은 아쉬웠음. 매우 큰 다이어그램에서는 가끔 나쁜 선택을 해서 지저분해짐
    문서화가 완전하진 않아도 코드는 꽤 수정하기 쉬워서, 마우스를 올렸을 때 툴팁을 띄우고 특정 상자를 클릭하면 다른 다이어그램으로 연결되게 해킹할 수 있었음. 이렇게 좋은 도구가 오픈소스라 고마움

  • 좋은 레이아웃을 얻는 게 정의 순서에 너무 의존함. 큰 다이어그램에서는 사용자가 해결하기 어려워질 수 있지만, 작은 다이어그램에서는 괜찮아 보임
    예를 들어 같은 해적 예제를 다른 순서로 쓰면 유효하긴 하지만 보기 나쁜 레이아웃이 나옴

    • 이런 도구의 문제는 문서에서 좋은 레이아웃을 어떻게든 얻어도, 뭔가를 추가·삭제·수정하는 순간 다시 씨름해야 한다는 점임
      다이어그램까지 포함한 기술 문서가 프로젝트 소스 코드의 일부가 되는 세상을 꿈꿔서 이런 코드 기반 다이어그램 제품들을 몇 가지 써봤지만, 특히 외부 배포용은 물론 내부용으로도 허용 가능한 레이아웃을 얻기가 힘들었음
      그 좌절은 대개 두 가지 나쁜 결과로 이어짐. 다이어그램이 읽을 수 없게 되거나, 유지보수되지 않게 됨
      솔직히 체크인 때 문서를 코드 리뷰한다는 발상도 신화에 가까움. 이런 문서의 diff는 이해하기 매우 어렵고, 렌더링해서 결과물을 보지 않고는 문서가 맞는지 의미 있게 확인하기가 거의 불가능함
      정말 잘 됐으면 하는 종류의 문제이고, 언젠가는 해결된 문제가 될지도 모름
    • 수정: 위에서 아래로 배치되는 줄 알았는데 아니었고, 순서를 다른 방식으로 정함
      원래 Pirate 표와 부모 댓글의 Pirate 표를 비교하면 위아래가 뒤집힘. beard와 parrot을 원하는 표시 순서대로 먼저 정의해도 여전히 뒤집혀 나옴
    • 결과 다이어그램에서 겹침이 가장 적어지도록 문장 순열을 최적화해주는 또 다른 도구가 필요함
    • 이 해적 예제는 이해에 별 도움이 안 됨. 이 뒤죽박죽 단어들을 의미가 통하게 배열할 방법이 있나 궁금함

  • 보기 좋고, PlantUML 클래스 다이어그램보다 훨씬 좋아 보임
    [0]: https://plantuml.com/class-diagram

    • 그럴 수도 있음. 하지만 또 다른 조각난 표준을 만들기보다, 이미 꽤 지원되는 표준의 기본 스타일을 더 보기 좋게 만들 수는 없을까 싶음
    • PlantUML은 내가 가장 자주 쓰는 다이어그램 중 하나인 시퀀스 다이어그램을 지원함. 아쉽게도 nomnoml은 지원하지 않음

  • graphviz가 떠오름

답변달기
GeekNews BeeBS 게시판 오픈! 자유로운 이야기와 소소한 일상을 함께 나눠보세요.