From 68cfb5ea97e7ef2a6e75b7906181d4bd446cd23d Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Tue, 8 Sep 2026 19:59:40 -0700 Subject: [PATCH 1/2] Remove website translations and serve English only --- .../current/tour/community.md | 5 - .../current/tour/connections.md | 180 -------- .../current/tour/containers.md | 105 ----- .../current/tour/design.md | 59 --- .../current/tour/experience.md | 20 - .../current/tour/future.md | 202 --------- .../current/tour/grid-diagrams.md | 288 ------------- .../current/tour/hello-world.md | 17 - .../current/tour/icons.md | 97 ----- .../current/tour/install.md | 54 --- .../current/tour/intro.md | 83 ---- .../current/tour/sequence-diagrams.md | 290 ------------- .../current/tour/shapes.md | 65 --- .../current/tour/sql-tables.md | 100 ----- .../current/tour/style.md | 384 ------------------ .../current/tour/text.md | 160 -------- .../current/tour/themes.md | 136 ------- .../current/tour/uml-classes.md | 71 ---- .../current/tour/cheat-sheet.md | 9 - .../current/tour/comments.md | 35 -- .../current/tour/hello-world.md | 16 - 21 files changed, 2376 deletions(-) delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/community.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/connections.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/containers.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/future.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/grid-diagrams.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/hello-world.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/icons.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/install.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/intro.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/sequence-diagrams.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/shapes.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/sql-tables.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/style.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/text.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/themes.md delete mode 100644 i18n/ko/docusaurus-plugin-content-docs/current/tour/uml-classes.md delete mode 100644 i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/cheat-sheet.md delete mode 100644 i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/comments.md delete mode 100644 i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/hello-world.md diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/community.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/community.md deleted file mode 100644 index bc5ff7bf..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/community.md +++ /dev/null @@ -1,5 +0,0 @@ -# 커뮤니티 - -- 질문이나 도움이 필요한 경우 [Discord 채널](https://discord.gg/NF6X8K4eDq)을 통해 빠르게 답변을 받으실 수 있습니다. -- 제안, 버그 발생 또는 팀 및 커뮤니티와 논의하고 싶은 사항이 있으신가요? D2는 [GitHub Issues](https://github.com/d2lang/d2/issues)를 사용하여 이슈들을 관리하고 있으며, [GitHub Discussions](https://github.com/d2lang/d2/discussions)으로 기능 요청 및 아이디어를 확인하고 있습니다. -- 개인적인 문의사항이 있으신 경우 hi@d2lang.com으로 이메일을 보내주세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/connections.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/connections.md deleted file mode 100644 index 08613b3c..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/connections.md +++ /dev/null @@ -1,180 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Connections1 from '@site/static/d2/connections-1.d2'; -import Connections2 from '@site/static/d2/connections-2.d2'; -import Connections3 from '@site/static/d2/connections-3.d2'; -import Connections4 from '@site/static/d2/connections-4.d2'; -import Connections5 from '@site/static/d2/connections-5.d2'; -import ConnectionsReference from '@site/static/d2/connections-reference.d2'; - -# 연결(Connection) - -연결은 도형 간의 관계를 정의합니다. - -## 기본 - -도형 사이의 하이픈 또는 화살표는 연결을 정의합니다. - -```d2 -Write Replica Canada <-> Write Replica Australia - -Read Replica <- Master -Write Replica -> Master - -Read Replica 1 -- Read Replica 2 -``` - -연결에서 선언되지 않은 도형을 참조하는 경우 해당 도형이 새로 생성됩니다([hello world](hello-world.md)에서 확인 가능). - -:::info -4가지 방법으로 연결을 정의할 수 있습니다. - -- `--` -- `->` -- `<-` -- `<->` - -::: - -### 연결 레이블(Connections labels) - -```d2 -Read Replica 1 -- Read Replica 2: Kept in sync -``` - -### 연결 시 레이블이 아닌 도형의 키를 참조해야 합니다. - -```d2 -be: Backend -fe: Frontend - -# 새로운 도형이 생성됩니다 -Backend -> Frontend - -# 기본 레이블(키)에 대한 연결을 정의합니다. -be -> fe -``` - -## 예시 - -```d2 -Write Replica Canada <-> Write Replica Australia - -Read Replica <- Master - -x -- y - -super long shape id here --\ - -> super long shape id even longer here -``` - -
- -## 반복 연결(Repeated connections) - -반복된 연결 선언은 기존 연결을 재정의하지 않습니다. -대신 새로운 연결이 생성됩니다. - -```d2 -Database -> S3: backup -Database -> S3 -Database -> S3: backup -``` - -
- -## 연결 체이닝(Connection chaining) - -가독성을 위해, 한 줄에 여러 연결을 정의하는 것이 더 자연스럽게 보일 수 있습니다. - -```d2 -# 레이블은 연결 체인의 각 연결에 적용됩니다. -High Mem Instance -> EC2 <- High CPU Instance: Hosted By -``` - -
- -## 사이클도 가능합니다 - -```d2 -Stage One -> Stage Two -> Stage Three -> Stage Four -Stage Four -> Stage One: repeat -``` - -
- -## 화살표 머리(Arrowheads) - -기본 화살표 머리의 모양을 재정의하거나 화살표 머리 옆에 레이블을 지정하려면 `source-arrowhead` 또는 `target-arrowhead`라는 속성을 사용해 정의합니다. - -```d2 -a: The best way to avoid responsibility is to say, "I've got responsibilities" -b: Whether weary or unweary, O man, do not rest -c: I still maintain the point that designing a monolithic kernel in 1991 is a - -a -> b: To err is human, to moo bovine { - source-arrowhead: 1 - - target-arrowhead: * { - shape: diamond - } -} - -b <-> c: "Reality is just a crutch for people who can't handle science fiction" { - source-arrowhead.label: 1 - - target-arrowhead: * { - shape: diamond - style.filled: true - } -} - -d: A black cat crossing your path signifies that the animal is going somewhere - -d -> a -> c -``` - -
- -:::info 화살표 머리 옵션 - -- `triangle` (기본) -- `arrow` (`triangle`과 비슷하지만 더 뾰족함) -- `diamond` - - `style.filled: true`와 같이 추가 스타일 지정 가능. -- `circle` - - `style.filled: true`와 같이 추가 스타일 지정 가능. -- `cf-one`, `cf-one-required` ("cf"는 "crows foot"의 약자) -- `cf-many`, `cf-many-required` - -::: - -:::info -화살표 머리의 레이블은 짧게 하는 것이 좋습니다. -일반 레이블처럼 최적의 위치 지정을 위해 자동 레이아웃이 이뤄지지 않으므로 레이블이 길 경우 주변 개체와 충돌할 가능성이 큽니다. -::: - -:::caution -화살표 머리 속성 부여 시 연결 내에 해당하는 화살표 머리가 존재하지 않는다면 아무 작업도 수행하지 않습니다. -다음 예시의 경우, 출발점에 화살표 머리가 없기 때문에 아무 작업도 수행하지 않습니다. - -```d2 -x -> y: { - source-arrowhead.shape: diamond -} -``` - -::: - -## 연결 참조(Referencing connections) - -원래 ID 뒤에 인덱스를 지정하여 연결을 참조할 수 있습니다. - -```d2 -x -> y: hi -x -> y: hello - -(x -> y)[0].style.stroke: red -(x -> y)[1].style.stroke: blue -``` - -
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/containers.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/containers.md deleted file mode 100644 index 4086c319..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/containers.md +++ /dev/null @@ -1,105 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Containers1 from '@site/static/d2/containers-1.d2'; -import Containers2 from '@site/static/d2/containers-2.d2'; -import Containers3 from '@site/static/d2/containers-3.d2'; -import ContainersUnderscore from '@site/static/d2/containers-underscore.d2'; - -# 컨테이너(Container) - -```d2 -server -# 도형 안에 도형을 선언 -server.process - -# 컨테이너와 자식을 동시에 선언할 수 있습니다. -im a parent.im a child - -# 연결도 키를 선언할 수 있으므로 아래와 같은 것도 가능합니다. -apartment.Bedroom.Bathroom -> office.Spare Room.Bathroom: Portal -``` - -
- -## 중첩 구문 - -중첩 구문을 통해 중첩 맵을 생성하면 컨테이너를 반복적으로 작성하지 않아도 됩니다. - -```d2 -clouds: { - aws: { - load_balancer -> api - api -> db - } - - gcloud: { - auth -> db - } - - gcloud -> aws -} -``` - -
- -## 컨테이너 레이블 - -컨테이너 레이블을 정의하는 방법에는 두 가지가 있습니다. - -### 1. 약식 정의 - -```d2 -gcloud: Google Cloud { - ... -} -``` - -### 2. 예약된 키워드 `label`을 사용하는 방법 - -```d2 -gcloud: { - label: Google Cloud - ... -} -``` - -## 예시 - -```d2 -clouds: { - aws: AWS { - load_balancer -> api - api -> db - } - - gcloud: Google Cloud { - auth -> db - } - - gcloud -> aws -} - -users -> clouds.aws.load_balancer -users -> clouds.gcloud.auth - -ci.deploys -> clouds -``` - -
- -## 부모 참조 - -내부에서 컨테이너 외부의 무언가를 참조하고 싶을 때 사용합니다. -언더바 기호(`_`)로 외부의 다른 부모 컨테이너를 참조하고 있다는 것을 나타냅니다. - -```d2 -christmas: { - presents -} -birthdays: { - presents - _.christmas.presents -> presents: regift - _.christmas.style.fill: "#ACE1AF" -} -``` - -
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md deleted file mode 100644 index 5a4d2cad..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/design.md +++ /dev/null @@ -1,59 +0,0 @@ -# 설계 방안 - -다음은 D2의 개발 방향에 대해 설명하는 설계 방안입니다. -우리는 과거의 실수를 피하고 가장 성공적인 현대 프로그래밍 언어에서 영감을 얻기 위해 최선을 다했습니다. - -D2의 설계 방안은 본질적으로 절충안에 가깝습니다. -따라서 이들 중 일부는 당신이 동의하지 못할 수 있습니다. -그러나 만약 당신이 프로그래머라면, D2는 당신을 위해 만들어진 것이며, 저희는 이러한 결정들이 모여 당신이 편안하게 느낄 수 있는 언어를 만들었다고 믿습니다. - -언어가 계속 발전함에 따라 이러한 것들도 필연적으로 발전할 것입니다. - -## 가독성 > 프로토타입 개발 속도 - -가독성과 프로토타입 개발 속도 모두 중요하지만 둘 중 하나를 택해야 할 경우 D2는 일반적으로 가독성을 선호합니다. - -대부분의 경우 둘 중 하나를 택해야 하는 경우는 없습니다. -좋은 프로그래밍 언어는 일반적으로 두가지 모두를 택할 수 있도록 합니다. -D2의 문법은 가벼우며, 자동 포맷터가 항상 정확하게 사용되도록 설계되어 프로젝트 간에 일관성을 유지하도록 합니다. - -사용 편의성, 프로토타입 개발 속도, 가독성 사이에서 적절한 균형을 찾으시길 바랍니다. -D2는 특히 위의 세가지를 모두 무시하는 명료하지 않고 간결한 구문의 사용을 피하고 있습니다. - -예를 들어 원통 모양을 정의하는 두 가지 방법이 있습니다. - -D2: - -```d2 -A: Christmas {shape: cylinder} -``` - -Mermaid: - -``` -A[(Christmas)] -``` - -D2는 덜 간결하지만 훨씬 더 읽기 쉽습니다. - -## 경고 > 에러 - -D2는 가능할 때마다 컴파일합니다. -예를 들어, 존재하지 않는 클래스를 적용하거나 특정 모양에 영향을 주지 않는 스타일을 추가한다고 가정해 보겠습니다. -사용자 오류가 D2가 무시할 수 있는 오류인 경우 성공적으로 컴파일되고 최대 경고만 표시됩니다. -디버깅하는 동안 일부 코드를 주석 처리하고 사용되지 않은 변수가 있다는 뜻밖의 오류 메시지를 받는 것보다 더 짜증나는 일은 없습니다. - -## 좋은 기본 설정 - -D2의 기본 설정, 즉 사용자가 아무것도 변경하지 않았을 때는 좋은 다이어그램을 생성해야 합니다. -이를 위해서는 어떤 기본 설정이 좋은지에 대해 명확한 견해를 가져야 합니다. -예를 들어, D2는 단색이 아닌 쾌적한 색상이 기본 테마으로 제공됩니다. - -## 데스크톱 및 서버용을 위한 최적화 - -D2는 감시 모드가 내장되어 있고, 매뉴얼 페이지가 유지 관리되며, 표준 입력(stdin)에서 읽고 표준 출력(stdout)으로 쓰는 기능을 지원하는 강력한 CLI를 갖추고 있습니다. -이미지와 글꼴은 기본적으로 다이어그램에 포함되므로 내보내기(exported) 된 다이어그램은 독립형 다이어그램으로 어디에서나 동일하게 보입니다. -D2는 PPT 및 GIF와 같은 다양한 형식을 지원하며 모듈화를 위해 다이어그램을 여러 파일로 나눌 수 있는 가져오기(import) 기능을 제공합니다. -프로그래밍적으로 D2를 편집하고 작성할 수 있는 언어 API도 있습니다. -이 모든 것은 브라우저 렌더링을 위한 웹 라이브러리와는 반대되는 개념입니다 -D2는 이러한 용도의 웹 라이브러리를 제공하고 유지 관리할 계획이지만, 이는 후순위이기 때문에 전체 기능에서 간소화할 예정입니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md deleted file mode 100644 index e71dd6c9..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/experience.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -sidebar_label: 개발 툴 vs 디자인 툴 ---- - -# 다이어그램 개발툴 - -D2는 **"개발자가 다이어그램 작성을 즐겁게 할 수 있게 하자"**라는 단 하나의 목표를 가지고 설계되었습니다. -간단한 다이어그램을 그릴 경우에 이런 점을 만족시킬 수 있는 툴들은 많지만, 그러한 툴들은 다이어그램이 조금만 복잡해지는 순간 그럴 수 없게 됩니다. - -왜 그럴까요? -오늘날 대부분의 다이어그램 작성 툴들은 개발이 아닌 디자인을 위한 툴이기 때문입니다. -Figma나 Photoshop에서 볼 수 있는 것처럼, 그 툴들은 빈 캔버스와 작업용 툴바를 제공하여 실행해야할 작업을 디자인 프로세스로 취급합니다. -엔지니어는 비주얼 디자이너가 아니며, 시스템을 공간적으로 설계하는 능력이 부족하다고 해서 귀중한 문서 작성이 방해되어서는 안 됩니다. -모든 드래그와 드롭에는 계획이 필요하지 않아야 할 것이며, 업데이트는 새 항목을 위한 공간을 확보하기 위해 항목을 이동하고 크기를 조절해야 하는 귀찮은 작업이 되어서는 안 됩니다. -D2에서는 이러한 잔업들을 배제합니다. - -Hashicorp가 Terraform을 도입하여 엔지니어가 인프라를 텍스트로 작성할 수 있도록 하기 전에는 AWS 및 Google Cloud 콘솔을 클릭하여 인프라를 구성했습니다. -오늘날, 그런 방식은 전혀 전문적이지 않습니다. -그런 방식으로 검토 프로세스, 롤백 단계, 기록 및 버전 관리는 어떻게 할 수 있을까요? -또한, 시간이 지날수록 세계적인 기업들은 시각적 문서를 디자인 툴로 만들지는 않을 것입니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/future.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/future.md deleted file mode 100644 index 59748751..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/future.md +++ /dev/null @@ -1,202 +0,0 @@ -# 로드맵 - -import WebPImage from '@site/src/components/WebPImage'; - -:::info 간략 요약 -D2 프로젝트의 현재 작업들에 대한 자세한 내용은 [여기](https://github.com/d2lang/d2/issues?q=is%3Aopen+is%3Aissue+label%3Afeature)를 확인하세요. -::: - -D2 프로젝트의 장기적인 목표는 실무에서 쓰이는 높은 수준의 다이어그램을 만들고 유지하는 데 소요되는 시간과 노력을 크게 줄이는 것입니다. -이는 야심찬 대규모 사업이며, 완성까지 수년의 시간이 걸릴 것입니다. -특히 이러한 초기 단계에서는 활용성을 높이는 데 가장 큰 영향을 미치는 요소들에 집중하는 것이 중요합니다. -현재 최우선 과제는 다음과 같습니다. - -1. 제작 가능한 레이아웃의 범위를 확장한다. -2. 보기 좋은 다이어그램을 만들기 위해 필요한 노력을 최소화한다. -3. 널리 쓰이는 개발툴과의 통합을 지원한다. - -이들 각각의 진행률을 평가할 수 있는 기준들에 대해 설명하겠습니다. - -## 레이아웃 - -가끔은 머릿속의 그림을 정확하게 따라야 하는 다이어그램이 필요할 때가 있습니다. -이런 경우에는 디자인 도구와 드래그 앤 드롭 기능이 필요합니다. -그러나 때로는 굳이 정확하게 그릴 필요가 없거나, 결과물을 머릿속에 떠올리기 힘든 경우가 있습니다. -이런 경우에는 일련의 제약 조건만 만족하면 되기 때문에 다이어그램에 대한 요구사항이 상대적으로 엄격하지 않습니다. -이러한 종류의 다이어그램은 알고리즘을 사용하여 자동으로 생성할 수 있습니다.[0] -주로 소프트웨어 엔지니어링 다이어그램이 이에 해당합니다. - -
- - -
- -
-
정확한 배치와 고유의 모양 때문에 자동화할 수 없습니다.
-
자동화 가능합니다. 이런 관계를 보기 좋은 형태로 100가지 다른 방법을 통해 보여줄 수 있습니다.
-
- -현재로서 D2는 일부 자동화 가능한 다이어그램을 잘 처리할 수 있으며, 이 범위를 확대하는 것이 최우선 목표입니다.[1] -물론 이를 실현할 주요 수단은 당연하게도 레이아웃 엔진입니다. -이는 모양, 라벨, 아이콘, 연결 및 힌트를 입력으로 받아들여 "가독성"을 갖도록 배치하는 알고리즘을 기반으로 구동됩니다. - -다이어그램의 가독성에 대한 평가 기준으로는 다음 두 가지가 있습니다. - -1. 시각적 가독성: 불필요한 요소가 없고, 깔끔하며, 정렬되어 있고, 불필요한 연결 교차가 없는 상태인가? 더 이상의 개선 필요성이 존재하지 않는가? -2. 의미론적 가독성: 모델을 새로이 그릴 경우 시각적 가독성이 조금 떨어지더라도 모델이 더 이해하기 쉬워질 수 있는가? - -알고리즘은 보통 시각적 가독성에서 사람보다 더 뛰어난 성능을 보입니다. -다이어그램이 커질수록 그 차이는 더 뚜렷해집니다. - -의미론적 가독성은 좀 더 어려운 문제입니다. -대부분의 레이아웃 엔진은 계층 구조와 같이 단순한 "유형"의 다이어그램에만 국한되어 있습니다. -하지만 소프트웨어 아키텍처를 계층적으로 나타내고자 하는 경우는 드물며, 그렇게 배치할 경우 그 의미가 변경될 수 있습니다. - -### 평가 방법 - -- 시각적 관점: 명백한 개선 사항을 찾을 수 있는가? -- 의미론적 관점: 튜닝 테스트와 비슷한 맥락에서, 레이아웃이 알고리즘의 결과물인지 사람의 결과물인지 구별할 수 있는가? - -D2는 기본적으로 Dagre 엔진을 사용합니다. -마크다운 문법으로 다이어그램을 작성할 수 있는 Mermaid에서도 사용되는 최고의 오픈 소스 레이아웃 엔진 중 하나이지만, 이 또한 여전히 많은 부분에서 개선의 여지가 있습니다.[2] -Dagre는 불행히도 유지 보수되지 않고 계층 구조의 레이아웃만 생성합니다. -유지 보수가 다시 이뤄진다 하더라도, 기본적으로 계층적인 레이아웃을 벗어나지 않을 것입니다. -또한 소프트웨어 아키텍처 다이어그램에 필수적인 컨테이너 기능이 없습니다(D2는 해당 기능[2]을 지원합니다). - -### 앞으로의 계획 - -1. 개발이 완료된 특수 목적 레이아웃 엔진과 통합합니다. - 예를 들어 시퀀스 다이어그램 레이아웃 엔진에는 개선 사항이 없습니다. - git-commit 타임라인이나 방사형 레이아웃의 경우에도 마찬가지입니다. -2. 우리는 아예 새로운 범용 레이아웃 엔진[3]을 개발하여 소프트웨어 아키텍처 다이어그램 제작 테스트를 하고 있습니다. - 해당 엔진은 하나의 다이어그램에서 여러 하위 타입을 지원할 수 있습니다. - 예를 들어, 다이어그램의 일부는 트리이지만 다이어그램 전체가 트리 구조일 필요는 없습니다. - 또한, 컨테이너와 클러스터를 매우 잘 처리하고 레이블과 아이콘을 옮겨 충돌을 방지하는 등의 작업을 수행합니다. - -## 심미적 관점 - -공식 문서는 활용될 때만 가치가 있습니다. -그리고 그 안의 다이어그램이 보기 좋아야 더 잘 활용될 수 있습니다. -알고리즘 생성 다이어그램이 수작업으로 만든 것을 대체하려면 적어도 동등한 미적 수준을 가져야 합니다. -그리고 그것이 수작업으로 만든 것들보다 항상 우위에 있으려면 그 이상의 아름다움을 가져야 합니다. -또한, 사용자 맞춤 설정은 얼마나 많은 노력을 들이고 싶은지에 따라 단계적으로 나뉘어야 할 것입니다. - -1. 적은 노력: 전문 디자이너가 미리 만든 테마 중에서 선택합니다. -2. 적당한 노력: 자신만의 테마를 만들고 편집합니다. -3. 많은 노력: 모든 것을 맞춤형으로 만듭니다. - -대부분의 엔지니어는 1, 2단계에서 만족하지만 D2는 3단계를 만족시켜야 할 것입니다. - -### 평가 방법 - -- 블로그 포스팅 또는 회의에서 쓸 발표 자료와 같이 많은 사람들이 볼 자료에 넣을 다이어그램을 만들 떄, D2를 사용하여 만들 수 있을까? - -심미적 관점에 대한 평가에서, 중요한 기준 중 하나는 발표에서 쓸만한 다이어그램을 완성할만한 수준에 이르기까지 걸리는 시간입니다. -발표에서 사용 가능하다는 것은 화려한 색상과 그림자, 디자인 장식이 가득하지 않다는 것을 의미합니다. -이는 명확성을 높이는 일관된 색상, 회사 색상의 팔레트, 구분 가능한 형태와 화살표 등 발표할 때 사용해도 어색하지 않은 전문적인 다이어그램을 만드는 속성을 의미합니다. - -또 다른 고려 사항은 미적 요소에 대한 커스터마이징이 가능한지, 그리고 그 설정에 얼마나 많은 노력이 필요한지입니다. -커스터마이징을 GUI 수준으로 만든다는 건 욕심일 수 있겠지만, D2는 적어도 텍스트 기반 스타일링 언어인 CSS만큼의 수준을 목표로 하고 있습니다. - -### 앞으로의 계획 - -1. 커스터마이징을 더 쉽게 할 수 있는 기능을 구현합니다. - 전역 타겟팅(예: `x.*.style.fill`: `x`의 모든 하위 요소의 내부를 빨간색으로 채움) 또는 클래스(스타일 정의 후 재사용) 같은 기능들을 말합니다. - 도형과 연결 기능의 경우 카탈로그의 확장이 필요합니다. -1. 테마 제작에 계속 투자합니다. - 테마는 엔지니어들이 디자인하지 않고도 아름다운 다이어그램을 만들 수 있도록 합니다. - D2는 색상뿐만 아니라 글꼴, 배경 스타일(점, 그리드, 색상)과 같이 다이어그램의 모든 요소에 대해서 테마가 적용될 수 있는 부분을 세부적으로 적용할 수 있도록 확장해야 합니다. - 그리고 테마를 쉽게 만들고 수정할 수 있도록 해야 합니다. -1. D2와 번들로 제공될 고품질의 일관된 아이콘 세트를 선별합니다. - -## 개발자 도구 - -개발 도구가 기존 워크플로우나 익숙한 툴들에 대해 더 잘 지원할수록 유용하겠죠. -D2에는 공식 Vim 및 VSCode 확장이 있습니다. -언어 내의 기능은 자동 서식, 손상된 구문에 대한 분석, 사람이 읽을 수 있는 여러 오류 메시지 출력 등 편집기 환경 개선을 위해서만 존재합니다. - -결합성을 더 높이기 위해 D2에서는 추상 구문 트리(AST)를 고수준에서 조작할 수 있는 내장 API를 제공합니다. -이는 AST 노드에 대한 CRUD보다 더 지능적인 조작을 가능하게 합니다. -이를 통해 누구나 프로그래밍 방식으로 다이어그램을 작성하고 편집할 수 있습니다. -이 기능의 목표는 특정한 사용 방법을 제공하는 것이 아니라, 사용자들이 예상치 못한 새로운 방법으로 D2를 사용할 수 있게 하여, 무한한 가능성을 탐색할 수 있도록 하고자 하는 것입니다. - -D2의 플러그인 시스템은 이 언어를 더욱 확장 가능하게 만듭니다. -이를 통해 사용자는 D2 컴파일 과정의 여러 단계에 "훅(hooks)"을 추가할 수 있습니다. -예를 들어, D2의 핵심 기능은 아니지만, 가상의 플러그인 세트를 사용하여 스타일이 있는 테두리를 추가하고, 사용자의 서명이나 크레딧을 추가하며, 모든 것을 [손으로 그린 것처럼 보이게](https://github.com/d2lang/d2/pull/91)[4] 할 수 있고, 접근성을 높이기 위해 대비를 증가시킬 수 있습니다. - -### 평가 방법 - -- 현재 환경에서 D2를 쓰고 읽는 것이 "완전하다"고 느껴지는가? -- 예상치 못한 방식으로 사용할 수 있을 만큼 유연하고 확장 가능한가? - -#### 완성도 - -Vim의 Go 플러그인에 대한 개선점이 있을까요?[5] -전 잘 모르겠습니다. -"완전하다"는 느낌이 들었습니다. -하지만 그렇지 않은, 기본적인 토큰만 식별하고 거기서 멈춘 것처럼 느껴진 많은 플러그인/확장 기능들도 상당히 많습니다. -D2의 플러그인이 그렇게 되어서는 안되겠죠. - -#### 확장성 - -좋은 개발자 도구의 특징은 모듈 방식을 통해 예상 밖의 새로운 방식의 사용이 가능하다는 점입니다. - -### 앞으로의 계획 - -1. 플러그인 시스템의 발전: D2의 플러그인 시스템은 아직 초기 단계에 있으며, 컴파일 과정의 다양한 부분에 더 깊이 있는 훅을 허용해야 합니다. - 이를 통해 개발자들이 컴파일 과정에 더욱 효과적으로 개입하고, 사용자 정의 기능을 구현할 수 있게 됩니다. - -2. 편집기 통합 완성: 현재는 문법 강조 기능이 지원되고 있습니다. - 하지만, 예를 들어 VSCode와 같은 편집기에 대한 기능 완성도 높은 통합이 이루어진다면, 내장 브라우저로의 렌더링, 자동 포맷팅, LSP 기능 호출을 통한 리팩토링 등을 가능하게 할 수 있습니다. - -3. Import/Export 기능 확장: 현재 D2는 D2 파일을 입력받아 SVG 파일로 내보낼 수 있습니다. - 여기에 더해, 다른 인기 있는 텍스트-다이어그램 언어를 임포트하고, 다른 인기 있는 이미지 형식으로 출력할 수 있는 트랜스파일러를 구축해야 합니다. - 또한, 스키마의 CSV를 입력받아 ERD(엔티티-관계 다이어그램)를 만들 수 있어야 하며, ASCII 아트로 렌더링할 수 있는 기능도 있어야 합니다. - -4. 구성 가능한 린터 구축: 코드의 일관성과 품질을 유지하기 위해 사용자가 설정할 수 있는 린터를 구축해야 합니다. - 이를 통해 개발자는 자신의 코딩 스타일과 규칙에 맞춰 코드를 검사하고 수정할 수 있습니다. - -## 여러분의 피드백 - -제안 사항이나 피드백이 있으시면 언제든지 알려주세요! -[Github](https://github.com/d2lang/d2)에서 이슈를 열어주세요. - -## 주석 - -[0] - -상당히 많은 분야의 다이어그램들이 알고리즘을 통해 대부분 해석이 가능합니다. -예를 들어 HR도의 경우도 알고리즘을 통해 해석될 수 있죠. -반면, 생물학과 같은 분야에서는 대부분의 다이어그램이 맞춤형으로 그려지곤 합니다. - -[1] - -일부 다이어그램의 경우에는 항상 육체 노동이 필요합니다. -예를 들어 비행기의 반투명 청사진을 만들고 특정 부분에 모양과 선을 오버레이하려는 경우입니다. -좋은 GUI 다이어그램 제작자는 항상 필요합니다. - -[2] - -MermaidJS는 컨테이너에 대한 지원도 구현한 것으로 보이지만 공식적으로 출시되지 않았으며 라이브 편집기에서는 여전히 해당 기능이 작동하지 않습니다. - -[3] - -현재로서는 비공개 소스입니다. -무료로 다운로드하고 평가할 수 있습니다. -자세히 알아보려면 [https://terrastruct.com/tala](https://terrastruct.com/tala)를 방문하세요. - -[4] - -수작업의 ​​낭만을 원한다면 D2에서 도와드릴 수 있습니다. [링크](https://github.com/d2lang/d2/pull/492)를 참고하세요. - -[5] - -사실 gopls가 CPU를 많이 잡아먹는 바람에 제 컴퓨터 속도가 2005년으로 돌아간 것 같아요. 하지만 이건 vim-go의 잘못은 아니에요! diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/grid-diagrams.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/grid-diagrams.md deleted file mode 100644 index 8628e528..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/grid-diagrams.md +++ /dev/null @@ -1,288 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Grid from '@site/static/d2/grid.d2'; -import Grid2 from '@site/static/d2/grid-2.d2'; -import Grid3 from '@site/static/d2/grid-3.d2'; -import Grid4 from '@site/static/d2/grid-4.d2'; -import GridDimensions from '@site/static/d2/grid-dimensions.d2'; -import GridFill from '@site/static/d2/grid-fill.d2'; -import GridNestedGrid from '@site/static/d2/grid-nested-grid.d2'; -import Table from '@site/static/d2/table.d2'; - -# 그리드 다이어그램 - -그리드 다이어그램을 사용하면 구조화된 그리드에 객체를 표시할 수 있습니다. - -
- -:::info -위 다이어그램의 소스코드는 페이지 하단에 있습니다. -::: - -다음 두 개의 키워드만으로 이 모든 걸 할 수 있습니다. - -- `grid-rows` -- `grid-columns` - -`grid-rows`만 설정했을 경우: - -```d2 -grid-rows: 3 -Executive -Legislative -Judicial -``` - -
- -`grid-columns`만 설정했을 경우: - -```d2 -grid-columns: 3 -Executive -Legislative -Judicial -``` - -
- -`grid-rows`와 `grid-columns`를 동시에 설정했을 경우: - -```d2 -grid-rows: 2 -grid-columns: 2 -Executive -Legislative -Judicial -``` - -
- -## 너비와 높이 - -독특한 구성을 원한다면 `width` 또는 `height`를 사용해 보세요. - -```d2 -grid-rows: 2 -Executive -Legislative -Judicial -The American Government.width: 400 -``` - -
- -각 행 내에서 객체가 어떤 식으로 균등하게 분포되는지 확인해 보세요. - -## 셀 확장 - -행이나 열 중 하나에 대해서만 너비나 높이를 정의하면 해당 객체가 확장됩니다. - -```d2 -grid-rows: 3 -Executive -Legislative -Judicial -The American Government.width: 400 -Voters -Non-voters -``` - -`Voters`와 `Non-voters`가 공간을 어떻게 채우는지 확인해보세요. - -
- -## Dominant direction - -행과 열을 모두 적용하면 먼저 정의된 방향을 기준으로 셀이 먼저 채워집니다. -이 방향을 "Dominant direction"이라 합니다. - -예시: - -```d2 -grid-rows: 4 -grid-columns: 2 -``` - -`grid-rows`가 먼저 정의되므로 객체는 가로 방향으로 먼저 채워집니다. - -
- -반대의 경우는 다음과 같습니다. - -```d2 -grid-columns: 2 -grid-rows: 4 -``` - -아래와 같이 다른 방향으로 채워질 것입니다. - -
- -:::info -위의 애니메이션은 D2만으로 구현되었습니다. -즉, 그리드 다이어그램의 구성 과정을 애니메이션화 할 수 있습니다. -이 [코드](https://github.com/d2lang/d2-docs/blob/f5c762223ce192338d9d7865df3ca8533d683cdc/static/bespoke-d2/grid-row-dominant.d2)와 함께 `animate-interval` 플래그를 사용하세요. -이에 대한 자세한 내용은 뒤에 나오는 [composition](/tour/composition/) 섹션에서 확인하세요. -::: - -## 그리드 간격 크기 조절 - -다음 3가지 키워드를 사용하여 그리드의 간격 크기를 제어할 수 있습니다. - -- `vertical-gap` -- `horizontal-gap` -- `grid-gap` - -`grid-gap` 설정은 `vertical-gap`과 ​​`horizontal-gap`을 동시에 설정하는 것과 같습니다. - -`vertical-gap` 또는 `horizontal-gap`으로 `grid-gap`을 재정의할 수 있습니다. - -특히 `grid-gap: 0`은 몇 가지 흥미로운 구성을 만들 수 있습니다. - -### 이를 통해 다음과 같이 일본의 지도도 만들 수 있습니다. - -
- -> [소스 코드](https://github.com/d2lang/d2/blob/master/docs/examples/japan-grid/japan.d2) - -### 또는 테이블형 데이터에도 저장 가능합니다. - -
- -```d2 -# 객체가 행 중심 순서로 작성되도록 지정됩니다. -grid-rows: 2 -grid-columns: 4 -grid-gap: 0 - -classes: { - header: { - style.underline: true - } -} - -Element.class: header -Atomic Number.class: header -Atomic Mass.class: header -Melting Point.class: header - -Hydrogen -1 -"1.008" -"-259.16" - -Carbon -6 -"12.011" -3500 - -Oxygen -8 -"15.999" -"-218.79" -``` - -## 연결 - -D2의 일반 객체처럼 그리드와 다른 객체를 연결할 수 있습니다. -그리드 내의 객체에 대한 연결은 곧 제공될 예정입니다. - -
- -> [소스 코드](https://github.com/d2lang/d2-docs/blob/eda2d8739ce21c656e7608be48cb9067df36eb53/static/d2/grid-connected.d2) - -## 중첩 - -D2의 현재 버전에서는 그리드 다이어그램 내에 또다른 그리드 다이어그램을 중첩할 수 있습니다. -다른 유형의 중첩도 곧 제공될 예정입니다. - -```d2 -grid-gap: 0 -grid-columns: 1 -header -body: "" { - grid-gap: 0 - grid-columns: 2 - content - sidebar -} -footer -``` - -
- -## 소스 코드 - -다음은 이 페이지 상단의 이미지에 대한 소스 코드입니다. - -```d2 -grid-rows: 5 -style.fill: black - -classes: { - white square: { - label: "" - width: 120 - style: { - fill: white - stroke: cornflowerblue - stroke-width: 10 - } - } - block: { - style: { - text-transform: uppercase - font-color: white - fill: darkcyan - stroke: black - } - } -} - -flow1.class: white square -flow2.class: white square -flow3.class: white square -flow4.class: white square -flow5.class: white square -flow6.class: white square -flow7.class: white square -flow8.class: white square -flow9.class: white square - -dagger engine: { - width: 800 - class: block - style: { - fill: beige - stroke: darkcyan - font-color: blue - stroke-width: 8 - } -} - -any docker compatible runtime: { - width: 800 - class: block - style: { - fill: lightcyan - stroke: darkcyan - font-color: black - stroke-width: 8 - } - icon: https://icons.d2lang.com/dev%2Fdocker.svg -} - -any ci: { - class: block - style: { - fill: gold - stroke: maroon - font-color: maroon - stroke-width: 8 - } -} -windows.class: block -linux.class: block -macos.class: block -kubernetes.class: block -``` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/hello-world.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/hello-world.md deleted file mode 100644 index 18d4c9e2..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/hello-world.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -pagination_next: tour/shapes ---- - -import CodeBlock from '@theme/CodeBlock'; -import HelloWorld from '@site/static/d2/hello-world.d2'; - -# Hello World - -```d2 -x -> y: hello world -``` - -
- -위 명령문으로 두 셰이프 `x`와 `y`를 `hello world`라는 라벨과 함께 연결할 수 있습니다. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/icons.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/icons.md deleted file mode 100644 index c614ce80..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/icons.md +++ /dev/null @@ -1,97 +0,0 @@ ---- -sidebar_label: 아이콘, 이미지 ---- - -import CodeBlock from '@theme/CodeBlock'; -import Icons1 from '@site/static/d2/icons-1.d2'; -import IconPlacement from '@site/static/d2/icon-placement.d2'; -import IconsImage from '@site/static/d2/icons-image.d2'; - -# 아이콘 - -:::tip -저희는 여러분들이 이 언어를 좀 더 쉽게 시작할 수 있도록 소프트웨어 아키텍처 다이어그램에서 흔히 볼 수 있는 아이콘 모음을 무료로 호스팅하고 있습니다: [https://icons.d2lang.com](https://icons.d2lang.com). -::: - -아이콘과 이미지는 개발 시 작성하는 다이어그램의 필수 요소입니다. - -값으로 어떤 URL이든 쓸 수 있습니다. - -```d2 -my network: { - icon: https://icons.d2lang.com/infra/019-network.svg -} -``` - -
- -:::info -연결에 적용 가능한 아이콘이 곧 개발 될 예정입니다. -::: - -:::info -D2 CLI를 로컬에서 사용하시나요? `icon: ./my_cat.png`와 같이 로컬 이미지를 지정해 가져올 수 있습니다. -::: - -아이콘은 자동으로 배치됩니다. -레이아웃 엔진에 따라 고려 사항이 다르지만 일반적으로 레이블 존재 여부, 컨테이너인지 여부 등이 아이콘의 배치를 방해하지 않도록 합니다. -다음 다이어그램에서 왼쪽 상단의 컨테이너 아이콘과 중앙에 컨테이너가 아닌 아이콘이 어떻게 배치되는지 확인해보세요. - -```d2 -vpc: VPC 1 10.1.0.0./16 { - icon: https://icons.d2lang.com/aws%2F_Group%20Icons%2FVirtual-private-cloud-VPC_light-bg.svg - - style: { - stroke: green - font-color: green - fill: white - } - - az: Availability Zone A { - style: { - stroke: blue - font-color: blue - stroke-dash: 3 - fill: white - } - - firewall: Firewall Subnet A { - icon: https://icons.d2lang.com/aws%2FNetworking%20&%20Content%20Delivery%2FAmazon-Route-53_Hosted-Zone_light-bg.svg - - style: { - stroke: purple - font-color: purple - fill: "#e1d5e7" - } - - ec2: EC2 Instance { - icon: https://icons.d2lang.com/aws%2FCompute%2F_Instance%2FAmazon-EC2_C4-Instance_light-bg.svg - } - } - } -} -``` - -
- -:::info -아이콘은 뒤에 소개될 [`near` 키워드](/tour/positions/)로 배치할 수 있습니다. -::: - -## `shape: image`을 추가해 독립형 아이콘 만들기 - -```d2 -server: { - shape: image - icon: https://icons.d2lang.com/tech/022-server.svg -} - -github: { - shape: image - icon: https://icons.d2lang.com/dev/github.svg -} - -server -> github -``` - -
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/install.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/install.md deleted file mode 100644 index d829d413..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/install.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -pagination_next: tour/hello-world ---- - -# 설치하기 - -:::tip -[여기](https://github.com/d2lang/d2/blob/master/docs/INSTALL.md)에 Mac, Windows 및 Linux에서의 다양하고 자세한 설치 지침이 있습니다. -이 페이지는 그에 대한 요약 버전입니다. -::: - -## 스크립트로 설치하기 - -권장되는 설치 방법은 설치 스크립트를 실행해 설치하는 것입니다. -이 스크립트는 당신의 기기에서 가장 적합한 설치 방법을 찾아낼 것입니다. -예를 들어 기기에 설치된 패키지 관리자를 통해 D2를 사용할 수 있는 경우, 해당 패키지 관리자를 사용합니다. - -```shell -# With --dry-run the install script will print the commands it will use -# to install without actually installing so you know what it's going to do. -curl -fsSL https://d2lang.com/install.sh | sh -s -- --dry-run -# If things look good, install for real. -curl -fsSL https://d2lang.com/install.sh | sh -s -- -``` - -지침에 안내된 내용을 따라주세요. -지침을 따라 설치를 완료했다면 `d2 version`을 실행하여 설치가 성공적이었는지 테스트해주세요. - -제거를 원하는 경우: - -```shell -curl -fsSL https://d2lang.com/install.sh | sh -s -- --uninstall -``` - -## 소스 파일로 설치하기 - -소스 파일로 설치할 수도 있습니다. - -```shell -go install github.com/d2lang/d2@latest -``` - -:::info -[Github 릴리스 페이지](https://github.com/d2lang/d2/releases)에서 OS에 맞게 미리 컴파일된 바이너리 파일을 다운로드할 수도 있습니다. -::: - -# 사용해보기 - -```shell -echo 'x -> y' > input.d2 -d2 -w input.d2 out.svg -``` - -`input.d2`를 변경할 때마다 자동으로 새로고침되는 로컬 웹 브라우저가 실행되어야 합니다. 이제 가이드를 따라가면서 `input.d2`를 수정해보세요. diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/intro.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/intro.md deleted file mode 100644 index c7104092..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/intro.md +++ /dev/null @@ -1,83 +0,0 @@ ---- -sidebar_label: D2란? -pagination_next: tour/experience ---- - -import CodeBlock from '@theme/CodeBlock'; -import Example from '@site/static/bespoke-d2/terminal-theme.d2'; - -# D2 둘러보기 - -**D2**는 텍스트를 다이어그램으로 변환하는 다이어그램 스크립트 언어입니다. -"D2"라는 이름은 **Declarative Diagramming(선언형 다이어그램)**의 약자입니다. -"Declarative(선언형)"라는 단어에서 알 수 있듯이, D2에서 다이어그램으로 표시하려는 내용을 작성하면, 그에 맞는 이미지를 생성합니다. - -예를 들어, CLI를 다운로드 받아 `input.d2`란 이름의 파일을 만들고, 다음 실행문을 복사하여 실행하면 아래의 이미지를 얻을 수 있습니다. - -```sh -d2 --theme=300 --dark-theme=200 -l elk --pad 0 ./input.d2 -``` - -
- -```d2 -network: { - cell tower: { - satellites: { - shape: stored_data - style.multiple: true - } - - transmitter - - satellites -> transmitter: send - satellites -> transmitter: send - satellites -> transmitter: send - } - - online portal: { - ui: {shape: hexagon} - } - - data processor: { - storage: { - shape: cylinder - style.multiple: true - } - } - - cell tower.transmitter -> data processor.storage: phone logs -} - -user: { - shape: person - width: 130 -} - -user -> network.cell tower: make call -user -> network.online portal.ui: access { - style.stroke-dash: 3 -} - -api server -> network.online portal.ui: display -api server -> logs: persist -logs: {shape: page; style.multiple: true} - -network.data processor -> api server -``` - -## CLI 감시 모드 - - - -D2의 사용법을 알아보는 이 과정은 약 5~10분 안에 끝낼 수 있으며, 마지막 부분에는 참고를 위한 치트 시트를 다운로드 받을 수 있습니다. -기본적인 것만 원하는 경우 시작하기 챕터를 참고하세요. 2분 정도 소요됩니다. - -:::info -D2의 소스 코드는 다음에서 호스팅됩니다. -[https://github.com/d2lang/d2](https://github.com/d2lang/d2). - -이 문서의 소스 코드는 다음과 같습니다. -[https://github.com/d2lang/d2-docs](https://github.com/d2lang/d2-docs). -::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/sequence-diagrams.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/sequence-diagrams.md deleted file mode 100644 index ace5101d..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/sequence-diagrams.md +++ /dev/null @@ -1,290 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import WebPImage from '@site/src/components/WebPImage'; -import SequenceDiagrams1 from '@site/static/d2/sequence-diagrams-1.d2'; -import SequenceDiagrams2 from '@site/static/d2/sequence-diagrams-2.d2'; -import SequenceDiagrams3 from '@site/static/d2/sequence-diagrams-3.d2'; -import SequenceDiagrams4 from '@site/static/d2/sequence-diagrams-4.d2'; -import SequenceDiagramsScope from '@site/static/d2/sequence-diagrams-scope.d2'; -import SequenceDiagramsGroup from '@site/static/d2/sequence-diagrams-group.d2'; -import SequenceDiagramsNote from '@site/static/d2/sequence-diagrams-note.d2'; -import SequenceDiagramsSelf from '@site/static/d2/sequence-diagrams-self.d2'; -import SequenceDiagramsLifeline from '@site/static/d2/sequence-diagrams-lifeline.d2'; - -# 시퀀스 다이어그램 - -시퀀스 다이어그램은 객체에 `shape: sequence_diagram`을 설정해 생성할 수 있습니다. - -```d2 -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. -``` - -
- -## 규칙 - -다른 도구들과는 달리 시퀀스 다이어그램을 학습하기 위한 특별한 구문은 없습니다. -규칙은 D2의 다른 모든 규칙과 거의 동일하지만 두 가지 눈에 띄는 차이점이 있습니다. - -### 범위 - -시퀀스 다이어그램의 하위 요소들은 해당 시퀀스 다이어그램 전체에서 동일한 범위를 공유합니다. - -예시: - -```d2 -Office chatter: { - shape: sequence_diagram - - alice: Alice - bob: Bobby - - awkward small talk: { - alice -> bob: uhm, hi - bob -> alice: oh, hello - - icebreaker attempt: { - alice -> bob: what did you have for lunch? - } - - unfortunate outcome: { - bob -> alice: that's personal - } - } -} -``` - -
- -시퀀스 다이어그램 외부에서는 서로 다른 컨테이너 범위를 갖기 때문에 `alice`와 `bob`의 인스턴스가 여러 개 있을 수 있습니다. -그러나 `shape: sequence_diagram` 아래에 중첩되면 동일한 `alice`와 `bob`을 참조합니다. - -### 순서 - -앞에서 살펴봤던 D2로 나타낼 수 있는 여러 다이어그램들에서는 순서라는 개념이 없었습니다. -또한, 연결을 차례대로 정의하는 경우 나중에 그것이 순서대로 표시될 것이란 보장도 없었습니다. -그러나 시퀀스 다이어그램의 경우에 순서는 중요하게 다뤄집니다. -모든 것들은 정의하는 순서대로 표시됩니다. - -**액터(Actor)** 또한 정의 시 이 순서에 영향을 받습니다. -첫 액터의 경우는 제외하고는 액터를 명시적으로 정의할 필요는 없지만 액터들의 순서가 필요할 경우 순서대로 정의해야 합니다. - -```d2 -shape: sequence_diagram - -# 세미콜론을 사용해서 한 줄에 여러 개체를 정의할 수 있다는 점을 잊지마세요. -# 액터는 왼쪽에서 오른쪽으로 a, b, c, d...로 나타납니다. - -a; b; c; d - -# 연결 순서가 달라도 액터의 순서는 영향을 받지 않습니다. - -c -> d -d -> a -b -> d -``` - -:::info -액터는 **"참여자"**라고도 불립니다. -::: - -## 기능 - -### 시퀀스 다이어그램은 D2 객체입니다. - -시퀀스 다이어그램은 어딘가에 속하거나, 연결하거나, 레이블을 재지정하거나, 스타일을 재지정하는 등, D2의 다른 객체들처럼 취급됩니다. - -```d2 -direction: right - -Before and after becoming friends: { - 2007: Office chatter in 2007 { - shape: sequence_diagram - - alice: Alice - bob: Bobby - - awkward small talk: { - alice -> bob: uhm, hi - bob -> alice: oh, hello - - icebreaker attempt: { - alice -> bob: what did you have for lunch? - } - - unfortunate outcome: { - bob -> alice: that's personal - } - } - } - - 2012: Office chatter in 2012 { - shape: sequence_diagram - - alice: Alice - bob: Bobby - - alice -> bob: Want to play with ChatGPT? - bob -> alice: Yes! - bob -> alice.play: Write a play... - - alice.play -> bob.play: about 2 friends... - bob.play -> alice.play: who find love... - alice.play -> bob.play: in a sequence diagram - } - - 2007 -> 2012: Five\nyears\nlater -} -``` - -
- -### 스팬(Span) - -스팬은 시퀀스 다이어그램 내 상호 작용의 시작과 끝을 전달합니다. - -:::info -D2의 스팬은 "생명주기", "활성 박스", 또는 "활성바"라고도 합니다. -::: - -액터에 중첩된 개체를 연결하여 스팬을 지정할 수 있습니다. - -```d2 -shape: sequence_diagram - -alice.t1 -> bob -alice.t2 -> bob.a -alice.t2.a -> bob.a -alice.t2.a <- bob.a -alice.t2 <- bob.a -``` - -
- -### 그룹(Group) - -그룹은 시퀀스 다이어그램의 하위 요소들을 레이블링 할 때 좋습니다. - -:::info -D2의 그룹은 "프레그멘트", "엣지 그룹", 또는 "프레임"이라고도 합니다. -::: - -범위 지정 규칙을 설명할 때의 예시에서 이에 대한 예시가 이미 나왔습니다. -확실히 해두자면, 그룹은 어떤 것에도 연결되지 않고 내부에 연결이나 개체가 있는 `sequence_diagram` 내의 컨테이너입니다. - -```d2 -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. -} -``` - -:::caution -시퀀스 다이어그램의 고유한 범위 지정 규칙으로 인해 그룹 내에서 연결될 개체들은 최상위 스코프에서 선언된 상태여야 합니다. -위의 예시의 경우 `alice`와 `bob`은 그룹 선언 전에 명시적으로 선언되었습니다. -::: - -
- -### 메모(Notes) - -메모는 연결되지 않은 액터에 중첩된 개체를 정의하여 선언됩니다. - -```d2 -shape: sequence_diagram - -alice -> bob - -bob."In the eyes of my dog, I'm a man." - -# 메모도 그룹으로 묶을 수 있습니다. -important insight: { - bob."Cold hands, no gloves." -} - -bob -> alice: Chocolate chip. -``` - -
- -### 셀프 메세지 - -자기 참조 메시지는 액터 스스로에 대해 선언될 수 있습니다. - -```d2 -shape: sequence_diagram - -son -> father: Can I borrow your car? -friend -> father: Never lend your car to anyone to whom you have given birth. - -father -> father: internal debate ensues -``` - -
- -### 커스텀 - -다른 경우와 마찬가지로 도형의 형태와 연결의 스타일을 지정할 수 있습니다. -여기서는 일부 메시지에 점선을 표시하고 액터의 모양을 설정합니다. - -```d2 -shape: sequence_diagram -scorer: { shape: person } -scorer.t -> itemResponse.t: getItem() -scorer.t <- itemResponse.t: item { - style.stroke-dash: 5 -} - -scorer.t -> item.t1: getRubric() -scorer.t <- item.t1: rubric { - style.stroke-dash: 5 -} - -scorer.t -> essayRubric.t: applyTo(essayResp) -itemResponse -> essayRubric.t.c -essayRubric.t.c -> concept.t: match(essayResponse) -scorer <- essayRubric.t: score { - style.stroke-dash: 5 -} - -scorer.t -> itemOutcome.t1: new -scorer.t -> item.t2: getNormalMinimum() -scorer.t -> item.t3: getNormalMaximum() - -scorer.t -> itemOutcome.t2: setScore(score) -scorer.t -> itemOutcome.t3: setFeedback(missingConcepts) - -``` - -
- -위에서 아래로 떨어지고 있는 **생명선(Lifeline)**은 액터의 `stroke` 및 `stroke-dash` 스타일을 상속받습니다. - -```d2 -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. - -alice.style: { - stroke: red - stroke-dash: 0 -} -``` - -
- -## 용어 정리 - - diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/shapes.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/shapes.md deleted file mode 100644 index 6982c80b..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/shapes.md +++ /dev/null @@ -1,65 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Shapes1 from '@site/static/d2/shapes-1.d2'; -import Shapes2 from '@site/static/d2/shapes-2.d2'; - -# 도형(Shape) - -## 기본 - -다음과 같이 도형을 선언할 수 있습니다. - -```d2 -imAShape -im_a_shape -im a shape -i'm a shape -# 하이픈 한개로는 연결이 생성되지 않으므로 도형 작명 시 사용 가능 -# `a--shape`와 같이 하이픈 2개 사용 시 연결이 생성되므로 주의할 것 -a-shape -``` - -
- -세미콜론을 사용하여 같은 줄에 여러 도형을 정의할 수도 있습니다. - -```d2 -SQLite; Cassandra -``` - -기본적으로 도형의 레이블은 도형의 키와 동일합니다. -그러나 레이블을 따로 지정하고 싶다면 다음과 같이 새 레이블을 지정하세요. - -```d2 -pg: PostgreSQL -``` - -도형의 기본 타입은 `rectangle`(직사각형)입니다. -타입을 바꾸고 싶다면 `shape` 속성을 사용할 수 있습니다. - -```d2 -Cloud: my cloud -Cloud.shape: cloud -``` - -## 예시 - -```d2 -pg: PostgreSQL -Cloud: my cloud -Cloud.shape: cloud -SQLite; Cassandra -``` - -
- -:::info -키는 대소문자를 구분하지 않습니다. -따라서 `postgresql`과 `postgreSQL`은 동일한 도형을 가리킵니다. -::: - -:::info 도형 카탈로그 - -
- -`shape` 속성이 ​​취할 수 있는 다른 특수한 타입들이 더 있지만, 그건 다음 섹션에서 다루도록 하겠습니다. -::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/sql-tables.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/sql-tables.md deleted file mode 100644 index 209bf828..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/sql-tables.md +++ /dev/null @@ -1,100 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Tables1 from '@site/static/d2/tables-1.d2'; -import Tables2 from '@site/static/d2/tables-2.d2'; -import Tables3 from '@site/static/d2/tables-3.d2'; - -# SQL 테이블 - -## 기본 - -D2에서 도형을 `sql_table`로 설정한다면 계체-관계 다이어그램(ERD)을 쉽게 나타낼 수 있습니다. -다음은 기본적인 예시입니다. - -```d2 -my_table: { - shape: sql_table - # 여기서 제약 조건(constraint)의 타입은 컨테이너 문서에서 설명한 약식 정의 방식으로 정의됩니다. - # id 필드는 다음과 같은 도형으로 매핑됩니다. {type: int; constraint: primary_key} - id: int {constraint: primary_key} - last_updated: timestamp with time zone -} -``` - -
- -SQL 테이블 도형에서 각 키는 행을 정의합니다. -각 행의 콜론 다음에 오는 기본 값은 해당 값의 타입을 정의합니다. - -각 행의 제약 조건은 해당 SQL 제약 조건을 정의하며, D2는 그걸 인식하고 다음과 같이 축약하여 표시합니다. - -| constraint | short | -| ----------- | ----- | -| primary_key | PK | -| foreign_key | FK | -| unique | UNQ | - -그러나 위의 제약 조건 이외에도 다른 제약 조건들을 설정할 수 있습니다. -하지만 D2에서 인식할 수 없다면 축약되지 않습니다. - -:::info -배열을 사용하여 여러 제약 조건을 지정할 수도 있습니다. - -```d2 -x: int { constraint: [primary_key; unique] } -``` - -::: - -## 외래 키(Foreign Keys) - -다음은 두 테이블 간의 외래 키에 대한 연결을 정의하는 방법에 대한 예시입니다. - -```d2 -objects: { - shape: sql_table - id: int {constraint: primary_key} - disk: int {constraint: foreign_key} - - json: jsonb {constraint: unique} - last_updated: timestamp with time zone -} - -disks: { - shape: sql_table - id: int {constraint: primary_key} -} - -objects.disk -> disks.id -``` - -
- -커서를 기본 키 또는 외래 키 위로 가져가면 해당 키가 강조 표시됩니다. - -:::info -[TALA 레이아웃 엔진](/tour/tala/)으로 렌더링하면 해당 행으로부터 직접적으로 연결됩니다. -::: - -## 예시 - -다른 모든 도형과 마찬가지로 `sql_tables`를 컨테이너 안에 중첩하고 다른 도형을 정의해 연결할 수 있습니다. 예를 들면 다음과 같습니다. - -```d2 -cloud: { - disks: { - shape: sql_table - id: int {constraint: primary_key} - } - blocks: { - shape: sql_table - id: int {constraint: primary_key} - disk: int {constraint: foreign_key} - blob: blob - } - blocks.disk -> disks.id - - AWS S3 Vancouver -> disks -} -``` - -
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/style.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/style.md deleted file mode 100644 index 1804c70d..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/style.md +++ /dev/null @@ -1,384 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import StylesOpacity from '@site/static/d2/styles-opacity.d2'; -import StylesStroke from '@site/static/d2/styles-stroke.d2'; -import StylesFill from '@site/static/d2/styles-fill.d2'; -import StylesFillTransparent from '@site/static/d2/styles-fill-transparent.d2'; -import StylesFillPattern from '@site/static/d2/styles-fill-pattern.d2'; -import StylesStrokeWidth from '@site/static/d2/styles-stroke-width.d2'; -import StylesStrokeDash from '@site/static/d2/styles-stroke-dash.d2'; -import StylesBorderRadius from '@site/static/d2/styles-border-radius.d2'; -import Pill from '@site/static/d2/pill.d2'; -import StylesShadow from '@site/static/d2/styles-shadow.d2'; -import Styles3d from '@site/static/d2/styles-3d.d2'; -import StylesMultiple from '@site/static/d2/styles-multiple.d2'; -import StylesDoubleBorder from '@site/static/d2/styles-double-border.d2'; -import StylesFont from '@site/static/d2/styles-font.d2'; -import StylesFontSize from '@site/static/d2/styles-font-size.d2'; -import StylesFontColor from '@site/static/d2/styles-font-color.d2'; -import StylesTableColor from '@site/static/d2/styles-table-color.d2'; -import StylesAnimated from '@site/static/bespoke-d2/styles-animated.d2'; -import StylesTextDecoration from '@site/static/d2/styles-text-decoration.d2'; -import StylesTextTransform from '@site/static/d2/styles-text-transform.d2'; -import StylesRoot from '@site/static/d2/styles-root.d2'; - -# 스타일 - -도형의 스타일은 `style` 필드 아래에서 다음 예약 키워드들로 설정합니다. - -아래에 소개될 것들은 이 기본 다이어그램들에 개별적으로 적용되는 모든 유효한 스타일의 카탈로그입니다. - -
- -:::note -이번 챕터의 SVG 이미지들은 `direction: right`으로 렌더링되지만 간결성을 위해 스크립트에서는 생략되었습니다. -::: - -## Style keywords - -- [opacity](#opacity) -- [stroke](#stroke) -- [fill](#fill) (도형에만 적용됨) -- [fill-pattern](#fill-pattern) (도형에만 적용됨) -- [stroke-width](#stroke-width) -- [stroke-dash](#stroke-dash) -- [border-radius](#border-radius) -- [shadow](#shadow) (도형에만 적용됨) -- [3D](#3d) (직사각형/사각형에만 적용됨) -- [multiple](#multiple) (도형에만 적용됨) -- [double-border](#double-border) (직사각형/타원에만 적용됨) -- [font](#font) -- [font-size](#font-size) -- [font-color](#font-color) -- [animated](#animated) (연결에만 적용됨) -- [bold, italic, underline](#bold-italic-underline) -- [text-transform](#text-transform) -- [root](#root) - -## Opacity - -객체의 투명도를 `0`과 `1` 사이의 값으로 설정합니다. - -```d2 -x -> y: hi { - style: { - opacity: 0.4 - } -} -x.style.opacity: 0 -y.style.opacity: 0.7 -``` - -
- -## Stroke - -객체의 테두리 색상을 CSS 색상명 또는 16진수 코드로 설정합니다. - -```d2 -x -> y: hi { - style: { - stroke: deepskyblue - } -} -# D2에서 '#'은 주석이기 때문에 16진수로 작성 시 따옴표가 필요합니다. -x.style.stroke: "#f4a261" -``` - -
- -
- -`sql_table`과 `class`의 경우, `stroke`는 바디에 `fill`로 적용됩니다. -`fill`은 헤더의 `fill`을 설정하는 ​​데 사용되기 떄문입니다. - -
- -## Fill - -객체의 내부 색상을 CSS 색상명 또는 16진수 코드로 설정합니다. - -```d2 -x -> y: hi -x.style.fill: "#f4a261" -y.style.fill: honeydew -``` - -
- -
- -`sql_table` 및 `class`의 경우 `fill`이 헤더에 적용됩니다. - -
- -투명함을 원한다면 다음과 같이 설정해주세요. - -```d2 -x: { - y - y.style.fill: transparent -} -x.style.fill: PapayaWhip -``` - -
- -## Fill Pattern - -객체의 내부를 특정 패턴으로 채웁니다. - -사용 가능한 패턴: - -- `dots` -- `lines` -- `grain` - -(이 페이지에서 쓰인 테마에서는 `fill-pattern`이 어떻게 적용되는지 잘 보이지 않습니다. -[이 사이트](https://play.d2lang.com)에서 테스트해보세요.) - -```d2 -style.fill-pattern: dots -x -> y: hi -x.style.fill-pattern: lines -y.style.fill-pattern: grain -``` - -
- -## Stroke Width - -객체의 테두리 두께를 `1`과 `15` 사이의 정수로 설정합니다. - -```d2 -x -> y: hi { - style: { - stroke-width: 8 - } -} -x.style.stroke-width: 1 -``` - -
- -## Stroke Dash - -객체의 테두리를 파선으로 만듭니다. -`0`과 `10` 사이의 정수로 파선 내의 선 간격을 설정합니다. - -```d2 -x -> y: hi { - style: { - stroke-dash: 3 - } -} -x.style.stroke-dash: 5 -``` - -
- -## Border Radius - -객체의 테두리 모서리 곡률을 `0`과 `20` 사이의 정수로 설정합니다. - -```d2 -x -> y: hi -x.style.border-radius: 3 -y.style.border-radius: 8 -``` - -
- -:::info -연결에 "코너"가 적용되는 레이아웃 엔진(예: ELK)의 경우, `border-radius`는 연결에도 적용할 수 있습니다. -::: - -매우 높은 값으로 설정할 경우 도형이 알약 형태가 됩니다. - -```d2 -tylenol.style.border-radius: 999 -``` - -
- -## Shadow - -`true`, `false`로 그림자를 설정합니다. - -```d2 -x -> y: hi -x.style.shadow: true -``` - -
- -## 3D - -`true`, `false`로 3D 효과를 설정합니다. - -```d2 -x -> y: hi -x.style.3d: true -``` - -
- -## Multiple - -`true`, `false`로 객체를 여러 개가 겹쳐진 형태로 설정합니다. - -```d2 -x -> y: hi -x.style.multiple: true -``` - -
- -## Double Border - -`true`, `false`로 객체의 테두리를 쌍테두리로 설정합니다. - -```d2 -x -> y: hi -x.style.double-border: true -y.shape: circle -y.style.double-border: true -``` - -
- -## Font - -객체 내 글씨체를 설정합니다. -현재 존재하는 글씨체 옵션은 `mono` 뿐입니다. -앞으로 있을 업데이트를 기대해주세요. - -```d2 -x -> y: hi { - style: { - font: mono - } -} -x.style.font: mono -y.style.font: mono -``` - -
- -## Font Size - -객체 내 글씨체 크기를 `8`과 `100` 사이의 정수로 설정합니다. - -```d2 -x -> y: hi { - style: { - font-size: 28 - } -} -x.style.font-size: 8 -y.style.font-size: 55 -``` - -
- -## Font Color - -객체 내 글씨체 색상을 CSS 색상 이름 또는 16진수 코드로 설정합니다. - -```d2 -x -> y: hi { - style: { - font-color: red - } -} -x.style.font-color: "#f4a261" -``` - -
- -
- -`sql_table` 및 `class`의 경우 `font-color`는 헤더 텍스트에만 적용됩니다(테마는 바디의 내의 색상을 제어합니다). - -
- -## Animated - -`true`, `false`로 애니메이션 효과를 설정합니다. - -```d2 -x -> y: hi { - style.animated: true -} -``` - -
- -## Bold, italic, underline - -`true`, `false`로 텍스트 형태를 설정합니다. - -```d2 -x -> y: hi { - style: { - bold: true - } -} -x.style.underline: true -y.style.italic: true -# By default, shape labels are bold. Bold has precedence over italic, so unbold to see italic style -# 기본적으로 도형 레이블은 볼드체로 표시됩니다. -# 볼드체는 이탤릭체보다 우선 순위가 높으니, 이탤릭체를 적용하고 싶다면 볼드체 설정을 끄세요. -y.style.bold: false -``` - -
- -## Text transform - -`text-transform`은 레이블의 대소문자를 변환합니다. - -- `uppercase` -- `lowercase` -- `title` -- `none` (특수 테마가 적용됐을 경우 적용되는 대문자화를 무효화하는 데 사용됩니다.) - -```d2 -x -> y: hi { - style: { - text-transform: capitalize - } -} -x.style.text-transform: lowercase -y.style.text-transform: uppercase -``` - -
- -## Root - -일부 스타일은 전체 범위(root level)에서 적용 가능합니다. -예를 들어 다이어그램의 배경색을 설정하려면 `style.fill`을 사용하세요. - -현재 지원되는 키워드 세트는 다음과 같습니다. - -- `fill`: 다이어그램 배경색 -- `fill-pattern`: 배경 패턴 -- `stroke`: 다이어그램 프레임 -- `stroke-width` -- `stroke-dash` -- `double-border` - -```d2 -x -> y: hi -style: { - fill: LightBlue - stroke: FireBrick - stroke-width: 2 -} -``` - -
- -:::info -이 문서의 모든 다이어그램은 `pad=0`(환경 변수)으로 렌더링됩니다. -::: diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/text.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/text.md deleted file mode 100644 index e4b0a6fb..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/text.md +++ /dev/null @@ -1,160 +0,0 @@ ---- -sidebar_label: 텍스트, 코드 -pagination_next: tour/icons ---- - -import CodeBlock from '@theme/CodeBlock'; -import Markdown from '@site/static/d2/markdown.d2'; -import Text2 from '@site/static/d2/text-2.d2'; -import Code2 from '@site/static/d2/code-2.d2'; -import NonMarkdownText from '@site/static/d2/non-markdown-text.d2'; -import Latex from '@site/static/d2/latex.d2'; - -# 텍스트 - -## D2에서는 Markdown으로 독립적인 텍스트 블록을 만들 수 있습니다. - -```d2 -explanation: |md - # I can do headers - - lists - - lists - - And other normal markdown stuff -| -``` - -
- -## 대부분의 언어가 지원됩니다 - -D2는 중국어, 일본어, 한국어, 심지어 이모지와 같은 비라틴 언어들을 포함하여 여러분이 사용하는 거의 모든 언어를 지원합니다! - -
- -## LaTeX - -`latex` 또는 `tex`를 사용해 LaTeX 언어 블록을 설정할 수 있습니다. - -```d2 -plankton -> formula: will steal -formula: { - equation: |latex - \lim_{h \rightarrow 0 } \frac{f(x+h)-f(x)}{h} - | -} -``` - -
- -LaTeX 블록에 대한 주의 사항: - -- D2에서 `\`는 탈출 문자입니다. - 때문에 위의 예시에서 `\\`를 사용한 것입니다. - -- LaTeX 블록은 `font-size` 설정을 따르지 않습니다. - 대신 다음 명령들을 사용하여 Latex 스크립트 자체 내에서 스타일을 지정해야 합니다. - - - `\tiny{ }` - - `\small{ }` - - `\normal{ }` - - `\large{ }` - - `\huge{ }` - -- 내부적으로는 [MathJax](https://www.mathjax.org/)를 사용하고 있습니다. - 따라서 완전한 LaTeX가 아닙니다(원래 LaTeX에는 문서 레이아웃 엔진이 포함되어 있습니다). - D2의 LaTeX 블록은 수학적 표기법을 표시하기 위한 것이지만 기존 LaTeX 문서의 형식을 지원하지 않습니다. - 지원되는 모든 명령 목록은 [이 사이트](https://docs.mathjax.org/en/latest/input/tex/macros/index.html)를 참조하세요. - -:::caution -D2는 최신 버전의 MathJax에서 실행되며, 여러모로 유용하지만 안타깝게도 줄 바꿈 기능이 없습니다. -하지만 `displaylines` 명령으로 이 문제를 해결할 수 있습니다. -아래 내용를 참고하세요. -::: - -:::note -참고로 아직은 LaTex를 레이블에는 적용할 수 없습니다. -따라서 위의 예시에서는 중첩 구문을 사용했습니다. -레이블에 적용하는 기능은 곧 출시될 예정입니다. -::: - -## 코드 - -다음과 같이 프로그래밍 언어 이름을 적용해 코드 블록을 생성할 수도 있습니다. - -```d2 -explanation: |go - awsSession := From(c.Request.Context()) - client := s3.New(awsSession) - - ctx, cancelFn := context.WithTimeout(c.Request.Context(), AWS_TIMEOUT) - defer cancelFn() -| -``` - -
- -## 고급 기능: Markdown이 아닌 텍스트 - -경우에 따라 Markdown이 아닌 텍스트가 필요할 수 있습니다. -Markdown 또는 D2가 사용하는 GitHub 스타일의 Markdown이 마음에 들지 않거나, 도형 타입을 텍스트로 빠르게 변경하고 싶을 수 있습니다. -그럴 경우 `shape: text`를 설정하기만 하면 됩니다. - -```d2 -title: A winning strategy { - shape: text - near: top-center - style: { - font-size: 55 - italic: true - } -} - -poll the people -> results -results -> unfavorable -> poll the people -results -> favorable -> will of the people -``` - -
- -## 고급 기능: 블록 문자열 - -파이프 기호 `|`이 일반적으로 사용되는 Typescript의 경우는 어떻게 하면 될까요? -파이프를 하나 더 붙여서 `||`로 만들면 됩니다. - -```d2 -my_code: ||ts - declare function getSmallPet(): Fish | Bird; -|| -``` - -하지만 Typescript는 `||`도 사용하므로 제대로 작동하지 않습니다. -하나 더 붙입시다. - -```d2 -my_code: |||ts - declare function getSmallPet(): Fish | Bird; - const works = (a > 1) || (b < 2) -||| -``` - -트리플 파이프가 사용되는 언어나 상황이 있을 수 있습니다. -D2에서는 이를 위해 첫 번째 파이프 다음에 특수 기호(영어, 숫자, 공백 또는 `_`가 아님)를 사용할 수 있습니다. - -```d2 -# 훨씬 깔끔합니다! -my_code: |`ts - declare function getSmallPet(): Fish | Bird; - const works = (a > 1) || (b < 2) -`| -``` - -## 고급 기능: LaTeX 플러그인 - -D2에는 다음 LaTeX 플러그인들이 포함되어 있습니다. - - - {Latex} - - -
diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/themes.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/themes.md deleted file mode 100644 index e8f1db4f..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/themes.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -pagination_next: tour/style ---- - -import CodeBlock from '@theme/CodeBlock'; -import WebPImage from '@site/src/components/WebPImage'; -import TerminalTheme from '@site/static/bespoke-d2/terminal-theme.d2'; - -# 테마 - -D2에는 당신의 다이어그램을 블로그나 위키에 삽입할 수 있도록 고급스럽고 전문적으로 보일 수 있도록 하는 다양한 테마가 있습니다. - - - - - -### 테이블과 같은 특별한 도형에도 적용됩니다. - -# "Grape soda" 테마 적용 - -
- -# "Vanilla nitro cola" 테마 적용 - -
- -## CLI에서 테마 설정하기 - -사용할 테마를 지정하려면 `-t, --theme` 플래그를 설정할 수 있습니다. - -```shell -d2 -t 101 input.d2 -``` - -환경 변수를 사용할 수도 있습니다. - -```shell -D2_THEME=101 d2 input.d2 -``` - -사용 가능한 테마를 확인하려면 다음 코드를 실행하세요. - -```shell -d2 themes -``` - -## 어두운 테마 - -어두운 테마는 기본 설정이 아니기 때문에 사용자의 시스템 기본 설정과 상관없이 다이어그램이 동일하게 보입니다. - -:::info -이 문서의 모든 다이어그램에는 어두운 테마가 있습니다. -시스템 기본 설정의 테마를 바꿀 때 어떻게 변하는지 확인해 보세요. -::: - -사용자의 시스템 기본 설정이 어두운 테마일 경우 다이어그램을 어두운 테마로 변하게 하려면 다음과 같이 플래그를 지정하면 됩니다. - -```shell -d2 --dark-theme 200 input.d2 -``` - -일반 테마와 마찬가지로 환경 변수를 사용하여 설정할 수도 있습니다. - -```shell -D2_DARK_THEME=200 d2 input.d2 -``` - -:::info -테마는 밝은 테마와 어두운 테마로 별도로 분류되어 있지만, 어두운 테마 ID를 `theme` 에 전달하여 다이어그램이 항상 어둡게 표시되도록 할 수 있습니다. -::: - -어두운 테마를 적용했을 때의 예시입니다.(이것은 SVG가 아닌 이미지이므로 시스템 기본 설정에 따라 변경되지 않습니다). - - -## 특수 테마 - -어떤 특별한 테마의 경우 단순히 색상이 바뀌는 것 이상의 효과가 적용됩니다. - -예를 들어 `Terminal` 테마를 적용하면 다음 속성들이 기본값으로 설정됩니다. - -- 모든 레이블이 대문자로 표기됩니다. -- 테두리가 둥글지 않습니다. -- 글꼴의 폭이 고정됩니다. -- 모든 컨테이너에 대해 `fill-pattern`이 `dots`으로 설정됩니다. -- 대부분의 외부 컨테이너에는 `double-border`가 `true`로 설정됩니다. - -
- -ELK 엔진으로 렌더링된 위 다이어그램의 소스 코드는 다음과 같습니다. -특수 테마는 다른 기본값을 사용하기 때문에 레이블의 대소문자 적용 여부와 같은 다이어그램에 표시된 많은 속성들이 소스에 표시되지 않습니다. - -```d2 -network: { - cell tower: { - satellites: { - shape: stored_data - style.multiple: true - } - - transmitter - - satellites -> transmitter: send - satellites -> transmitter: send - satellites -> transmitter: send - } - - online portal: { - ui: {shape: hexagon} - } - - data processor: { - storage: { - shape: cylinder - style.multiple: true - } - } - - cell tower.transmitter -> data processor.storage: phone logs -} - -user: { - shape: person - width: 130 -} - -user -> network.cell tower: make call -user -> network.online portal.ui: access { - style.stroke-dash: 3 -} - -api server -> network.online portal.ui: display -api server -> logs: persist -logs: {shape: page; style.multiple: true} - -network.data processor -> api server -``` diff --git a/i18n/ko/docusaurus-plugin-content-docs/current/tour/uml-classes.md b/i18n/ko/docusaurus-plugin-content-docs/current/tour/uml-classes.md deleted file mode 100644 index 2eb14aa0..00000000 --- a/i18n/ko/docusaurus-plugin-content-docs/current/tour/uml-classes.md +++ /dev/null @@ -1,71 +0,0 @@ -import CodeBlock from '@theme/CodeBlock'; -import Classes1 from '@site/static/d2/classes-1.d2'; -import Classes2 from '@site/static/d2/classes-2.d2'; - -# UML 클래스 - -## 기본 - -D2는 UML 클래스 다이어그램을 완벽하게 지원합니다. -다음은 기본적인 예시입니다. - -```d2 -MyClass: { - shape: class - - field: "[]string" - method(a uint64): (x, y int) -} -``` - -
- -`class` 도형의 각 키들은 필드 또는 메서드를 정의합니다. - -필드 키의 값은 필드의 타입을 의미합니다. - -`(`를 포함하는 모든 키는 메서드이며, 값은 반환값의 타입을 의미합니다. - -값이 없는 메소드 키의 반환 타입은 void입니다. - -## 가시성(Visibility) - -UML 스타일의 접근 제어자를 사용하여 필드/메서드에 대한 가시성을 나타낼 수도 있습니다. - -| 가시성 접근 제어자 | 의미 | -| :----------------: | :-------: | -| none | public | -| + | public | -| - | private | -| # | protected | - -https://www.uml-diagrams.org/visibility.html을 참조하세요. - -다음은 다양한 가시성과 더 복잡한 타입들에 대한 예시입니다. - -```d2 -D2 Parser: { - shape: class - - # 기본 가시성은 + 이므로 명시하지 않아도 됩니다. - +reader: io.RuneReader - readerPos: d2ast.Position - - # Private field. - -lookahead: "[]rune" - - # Protected field. - # 해당 행이 주석으로 구문 분석되는 것을 방지하려면 #를 탈출문자로 처리해야 합니다. - \#lookaheadPos: d2ast.Position - - +peek(): (r rune, eof bool) - rewind() - commit() - - \#peekn(n int): (s string, eof bool) -} - -"github.com/terrastruct/d2parser.git" -> D2 Parser -``` - -
diff --git a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/cheat-sheet.md b/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/cheat-sheet.md deleted file mode 100644 index 661cc665..00000000 --- a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/cheat-sheet.md +++ /dev/null @@ -1,9 +0,0 @@ -# 速查表 - -import WebPImage from '@site/src/components/WebPImage'; - -点击此预览以下载 PDF 文件。 - - - - diff --git a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/comments.md b/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/comments.md deleted file mode 100644 index 65abe78d..00000000 --- a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/comments.md +++ /dev/null @@ -1,35 +0,0 @@ -# 注释 - -D2 语言支持行注释和块注释。 - -## 行注释 - -行注释以井号（`#`）开头。 - -它们可以单独成行： - -```d2 -# 注释以井号开头，直至遇到换行符或 EOF。 -x -> y -``` - -也可以放在一行的末尾： - -```d2 -x -> y # 我在行尾 -``` - -## 块注释 - -块注释以三个双引号（`"""`）开头和结尾： - -```d2 -x -> y - -""" -这是一个 -块注释 -""" - -y -> z -``` diff --git a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/hello-world.md b/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/hello-world.md deleted file mode 100644 index 9650f6a2..00000000 --- a/i18n/zh-cn/docusaurus-plugin-content-docs/current/tour/hello-world.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -pagination_next: tour/shapes ---- -import CodeBlock from '@theme/CodeBlock'; -import HelloWorld from '@site/static/d2/hello-world.d2'; - -# Hello World - - - {HelloWorld} - - -
- -这里声明了两个形状 `x` 和 `y` 之间的连接，并带有标签 `hello world`。 From d24c49e1cd92d4444e62a20e90810db02960b55e Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Tue, 8 Sep 2026 20:00:17 -0700 Subject: [PATCH 2/2] Configure English-only builds and redirect retired locales --- README.md | 15 +-------------- docusaurus.config.ts | 15 ++++++--------- package.json | 1 - src/theme/NavbarItem/ComponentTypes.js | 2 -- 4 files changed, 7 insertions(+), 26 deletions(-) diff --git a/README.md b/README.md index 3c2223fb..beb84e9b 100644 --- a/README.md +++ b/README.md @@ -31,20 +31,7 @@ yarn yarn run dev ``` -### Translations - -Help wanted for translations. - -Current efforts: - -- Korean (Thanks @Baejw0111) - -To preview in dev mode: `yarn dev --locale ko`. - -Translations are filed under `i18n/ko/docusaurus-plugin-content-docs/current`. - -Once we have enough docs translated for a certain language (e.g. above 80%), we'll enable -the locale switcher on the nav bar for that language. +The site is maintained in English only. ### Note diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 56e37100..a6f8abe6 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -62,15 +62,7 @@ const config: Config = { i18n: { defaultLocale: "en", - locales: ["en", "ko"], - localeConfigs: { - en: { - label: "English", - }, - ko: { - label: "Korean (한국어)", - }, - }, + locales: ["en"], }, presets: [ @@ -219,6 +211,11 @@ const config: Config = { "@docusaurus/plugin-client-redirects", { fromExtensions: ["html", "htm"], + // Keep links to retired translations pointing to the English pages. + createRedirects: (existingPath: string) => [ + `/ko${existingPath}`, + `/zh-cn${existingPath}`, + ], redirects: [ { to: "/blog/tala-is-open-source/", diff --git a/package.json b/package.json index bc0de402..75992030 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "prod": "docusaurus build", "clear": "docusaurus clear", "swizzle": "docusaurus swizzle", - "write-translations": "docusaurus write-translations", "spell-check": "cspell \"**/*.md\" --config .cspell.json --no-exit-code --quiet | grep 'fix:' || echo 'No spelling errors found'" }, "dependencies": { diff --git a/src/theme/NavbarItem/ComponentTypes.js b/src/theme/NavbarItem/ComponentTypes.js index 9b3c9f7c..7dddcf96 100644 --- a/src/theme/NavbarItem/ComponentTypes.js +++ b/src/theme/NavbarItem/ComponentTypes.js @@ -1,6 +1,5 @@ import DefaultNavbarItem from "@theme/NavbarItem/DefaultNavbarItem"; import DropdownNavbarItem from "@theme/NavbarItem/DropdownNavbarItem"; -import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem"; import SearchNavbarItem from "@theme/NavbarItem/SearchNavbarItem"; import HtmlNavbarItem from "@theme/NavbarItem/HtmlNavbarItem"; import DocNavbarItem from "@theme/NavbarItem/DocNavbarItem"; @@ -10,7 +9,6 @@ import DocsVersionDropdownNavbarItem from "@theme/NavbarItem/DocsVersionDropdown import NavbarIconLink from "@theme/NavbarItem/NavbarIconLink"; const ComponentTypes = { default: DefaultNavbarItem, - localeDropdown: LocaleDropdownNavbarItem, search: SearchNavbarItem, dropdown: DropdownNavbarItem, html: HtmlNavbarItem,