그래프를 그리는 언어

사용처
grafana 의 diagram 플러그인에서 사용

예제
https://community.home-assistant.io/t/100956
https://grafana.com/grafana/plugins/jdbranham-diagram-panel

기본 문법
https://mermaid-js.github.io/mermaid/#/flowchart

디버깅
라이브 테스트 웹사이트에서 테스트 후 적용
https://mermaid-js.github.io/mermaid-live-editor/ 

%% 그래프 진행방향 Left -> Right
graph LR;

  %% 노드 선언
  ochang_router((오창R))
  daejeon_router((대전R))
  seoul_router((서울R))
  pusan_router((부산R))
  sejong_router((세종R))
  ulsan_router((울산R))
  pohang_router((포항R))
  %%
  ohang_kma["기상<br>슈퍼컴"]
  pusan_apcc("APCC")
  pusan_pnu("부산대")
  pusan_pknu("부경대")
  seoul_yonsei("연세대")
  gongju_univ("공주대")
  ulsan_unist("UNIST")
  pohang_postech("POSTECH")

  %% 클래스 적용
  class ochang_router router
  class daejeon_router router
  class seoul_router router
  class pusan_router router
  class sejong_router router
  class ulsan_router router
  class pohang_router router
  %%
  class ohang_kma ps
  class pusan_apcc ps
  class pusan_pnu ps
  class pusan_pknu ps
  class seoul_yonsei ps
  class gongju_univ ps
  class ulsan_unist ps
  class pohang_postech ps

  %% 클래스 선언
  %% 모양, 색, 테두리 등 설정
  classDef router fill:#CCF1FF,stroke:#333,stroke-width:2px;
  classDef ps fill:#E0D7FF,stroke:#333,stroke-width:2px;

  %% 노드 연결
  ohang_kma -- 10G--- ochang_router
  %%
  ochang_router --- daejeon_router
  daejeon_router --- seoul_router
  daejeon_router --- pusan_router
  daejeon_router --- sejong_router
  daejeon_router --- ulsan_router
  daejeon_router --- pohang_router
  %%
  pusan_router -- 1G --- pusan_apcc
  pusan_router -- 1G --- pusan_pnu
  pusan_router -- 1G --- pusan_pknu
  seoul_router -- 1G --- seoul_yonsei
  sejong_router -- 1G --- gongju_univ
  ulsan_router -- 1G --- ulsan_unist
  pohang_router -- 1G --- pohang_postech
  • 레이블 없음