shape 썸네일형 리스트형 [D2Lang] 11. D2의 Sequence 다이어그램의 사용법을 알아보자! (2) Sequence 다이어그램에서 그룹에 대해 알아보겠습니다. 여기서 말하는 그룹은 ”{}"로 감싸진 영역입니다. 또한 여기서 사용할 alice와 bob은 먼저 명시해야 합니다. shape: sequence_diagram alice bob shower thoughts: { alice -> bob: A physicist is an atom's way of knowing about atoms. alice -> bob: Today is the first day of the rest of your life. } life advice: { bob -> alice: If all else fails, lower your standards. } 아래는 결과입니다. 결과를 보시면 이전에 설명드렸던 자식 컨테이너와 같이 나왔.. 더보기 [D2Lang] 10. D2의 Sequence 다이어그램의 사용법을 알아보자! (1) Sequence 다이어그램의 경우 shape을 설정해서 사용할 수 있습니다. 다음과 같이 shape: sequence_diagram 사용합니다. shape: sequence_diagram alice -> bob: What does it mean\\nto be well-adjusted? bob -> alice: The ability to play bridge or\\ngolf as if they were games. 아래와 같이 출력됩니다. 시퀀스 다이어그램의 자식은 전체에서 동일한 범위를 가집니다. (중첩되지 않고 사용됩니다.) Office chatter: { shape: sequence_diagram alice: Alice bob: Bobby awkward small talk: { alice -> bo.. 더보기 [D2Lang] 5. D2의 Text & Code를 알아보자! 오늘은 Text와 code를 삽입하는 방법에 대해 알아보겠습니다. 1번째 코드입니다. #은 주석입니다. explanation: |md # up mark context | explanation2: |md # can use markdown context | explanation -> explanation2 plankton -> formula: will steal formula: { equation: |latex \\lim_{h \\rightarrow 0 } \\frac{f(x+h)-f(x)}{h} | } 아래의 사진은 결과입니다. upmark와 can use markdown은 마크다운 문법을 사용했으며 옆의 plankton과 formula는 LaTex(MathJax)를 통해 수식을 나타낸 것입니다. |사용할.. 더보기 [D2Lang] 4. D2의 Container를 알아보자! 오늘은 container의 중첩과 색상을 설정하는 방법을 알아보겠습니다. 아래의 예제 코드를 입력하시고 돌려보시면 아래의 사진과 같이 출력됩니다. root parent container1.child container1 parent container2: { label: parent2 child container2 -> child container3 } extra: extra parent { child1 -> _.parent container2.child container3 child2 -> _.parent container2 } parent container1.child container1 -> parent container2.child container2 root -> parent container1.c.. 더보기 [D2Lang] 3. D2에서 화살표 모양을 바꿔보자! 오늘은 화살표의 다양한 모양과 색상 설정하는 방법을 알아보겠습니다. 아래의 예제 코드를 입력하시고 돌려보시면 아래의 사진과 같이 출력됩니다. x1 -> y1 x2 -- y2 x3 dst로 "(시작 Box ) (화살표) ( 도착 Box )"의 형태를 기본으로 가지고 갑니다. 화살표의 종류는 아래와 같이 4종류이며 화살표의 머리 종류는 총 8개 있습니다. x5와 y5의 두번째 노란색 화살표를 보시면 triangle과 arrow의 차이가 안 보이는데요. 일단 문서에 따르면 arrow의 경우 triangle보다 더 뾰족하다고 합니다. x5 y5를 보시면 제가 style.filled속성을 사용했는데요. filled의 경우 현재 rectangle과 circle만 지원되고 있습니다. 또한 label속성으로 직접 화살.. 더보기 [D2Lang] 2. D2를 통한 다이어그램 상자의 모양 바꾸기! 매우 간단하게 변경하실 수 있습니다. d2에서 모양을 바꾸는 방법은 그냥 (개체 이름).shape 뒤에 지원되는 모양을 적으시면 됩니다. 아래 예제는 지원하는 모양을 정리해둔 예제입니다. 이외에는 special shape types라고 있는데 나중에 따로 정리하겠습니다. 일단 grid-rows: 4로 모양들을 4행으로 정리했습니다. grid-rows: 4 rectangle.shape: rectangle square.shape: square page.shape: page parallelogram.shape: parallelogram document.shape: document cylinder.shape: cylinder queue.shape: queue package.shape: package step.s.. 더보기 이전 1 다음
