From 92bf054942ca0193a1dcb5c5924b2aa5f3a03730 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Wed, 11 Jan 2023 23:47:41 -0800 Subject: [PATCH 1/4] 2023-01-11 11:47:41PM --- docs/diagrams/overview.d2 | 3 +++ docs/diagrams/overview.svg | 52 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 docs/diagrams/overview.d2 create mode 100644 docs/diagrams/overview.svg diff --git a/docs/diagrams/overview.d2 b/docs/diagrams/overview.d2 new file mode 100644 index 000000000..4081a7c3d --- /dev/null +++ b/docs/diagrams/overview.d2 @@ -0,0 +1,3 @@ +input: |d2 + hello +| diff --git a/docs/diagrams/overview.svg b/docs/diagrams/overview.svg new file mode 100644 index 000000000..7cfd3aa31 --- /dev/null +++ b/docs/diagrams/overview.svg @@ -0,0 +1,52 @@ + +hello + + + From ae10e0f58af88e34f906804a163e4d1165ea08d2 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Thu, 12 Jan 2023 00:30:23 -0800 Subject: [PATCH 2/4] overview --- docs/diagrams/overview.d2 | 46 +++++++++++++++++++++++++++++++++++++- docs/diagrams/overview.svg | 27 +++++++++++++++++++--- 2 files changed, 69 insertions(+), 4 deletions(-) diff --git a/docs/diagrams/overview.d2 b/docs/diagrams/overview.d2 index 4081a7c3d..83c199b9e 100644 --- a/docs/diagrams/overview.d2 +++ b/docs/diagrams/overview.d2 @@ -1,3 +1,47 @@ input: |d2 - hello + hello -> world | + +input -> compiler.parse + +compiler: { + parse -> AST + AST: Abstract Syntax Tree { + shape: oval + } + + AST -> compile +} + +compiler.compile -> graph +graph: Graph\n(shapes & connections) { + shape: oval +} + +graph -> Set Dimensions +Set Dimensions -> Use ruler to measure all texts -> measured graph +Set Dimensions -> Use given, premeasured dimensions -> measured graph + +measured graph: { + shape: oval +} + +measured graph -> layout engine -> positioned graph + +positioned graph -> exporter -> diagram + +diagram: finalized diagram (styled) { + shape: oval +} + +diagram -> render SVG + +render SVG -> use sketch post processor: optional + +use sketch post processor -> SVG bytes + +SVG bytes: { + shape: oval +} + +SVG bytes -> screenshot for PNG: optional diff --git a/docs/diagrams/overview.svg b/docs/diagrams/overview.svg index 7cfd3aa31..e38ca731a 100644 --- a/docs/diagrams/overview.svg +++ b/docs/diagrams/overview.svg @@ -3,7 +3,7 @@ id="d2-svg" style="background: white;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" -width="344" height="330" viewBox="-102 -102 344 330"> From 7bd18b60814a681d63647641fb00d567feb475a9 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Sat, 21 Jan 2023 14:48:10 -0800 Subject: [PATCH 3/4] save --- docs/architecture/README.md | 5 +++++ docs/{diagrams => architecture}/overview.d2 | 10 ++++++++++ docs/{diagrams => architecture}/overview.svg | 6 +++--- 3 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 docs/architecture/README.md rename docs/{diagrams => architecture}/overview.d2 (84%) rename docs/{diagrams => architecture}/overview.svg (98%) diff --git a/docs/architecture/README.md b/docs/architecture/README.md new file mode 100644 index 000000000..126358fc8 --- /dev/null +++ b/docs/architecture/README.md @@ -0,0 +1,5 @@ +# Table of Contents + +## Overview + +Overview diff --git a/docs/diagrams/overview.d2 b/docs/architecture/overview.d2 similarity index 84% rename from docs/diagrams/overview.d2 rename to docs/architecture/overview.d2 index 83c199b9e..bc719eb51 100644 --- a/docs/diagrams/overview.d2 +++ b/docs/architecture/overview.d2 @@ -8,6 +8,7 @@ compiler: { parse -> AST AST: Abstract Syntax Tree { shape: oval + fill: honeydew } AST -> compile @@ -16,6 +17,7 @@ compiler: { compiler.compile -> graph graph: Graph\n(shapes & connections) { shape: oval + fill: honeydew } graph -> Set Dimensions @@ -24,14 +26,21 @@ Set Dimensions -> Use given, premeasured dimensions -> measured graph measured graph: { shape: oval + fill: honeydew } measured graph -> layout engine -> positioned graph +positioned graph: { + shape: oval + fill: honeydew +} + positioned graph -> exporter -> diagram diagram: finalized diagram (styled) { shape: oval + fill: honeydew } diagram -> render SVG @@ -42,6 +51,7 @@ use sketch post processor -> SVG bytes SVG bytes: { shape: oval + fill: honeydew } SVG bytes -> screenshot for PNG: optional diff --git a/docs/diagrams/overview.svg b/docs/architecture/overview.svg similarity index 98% rename from docs/diagrams/overview.svg rename to docs/architecture/overview.svg index e38ca731a..313fe6542 100644 --- a/docs/diagrams/overview.svg +++ b/docs/architecture/overview.svg @@ -3,7 +3,7 @@ id="d2-svg" style="background: white;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" -width="2339" height="1707" viewBox="-102 -102 2339 1707">hello -> worldcompilerGraph(shapes & connections)measured graphpositioned graphfinalized diagram (styled)SVG bytesSet DimensionsUse ruler to measure all textsUse given, premeasured dimensionslayout engineexporterrender SVGuse sketch post processorscreenshot for PNGAbstract Syntax Treeparsecompile optionaloptional - + .d2-1671196375 .fill-N1{fill:#000410;} + .d2-1671196375 .fill-N2{fill:#0000B8;} + .d2-1671196375 .fill-N3{fill:#9499AB;} + .d2-1671196375 .fill-N4{fill:#CFD2DD;} + .d2-1671196375 .fill-N5{fill:#C3DEF3;} + .d2-1671196375 .fill-N6{fill:#EEF1F8;} + .d2-1671196375 .fill-N7{fill:#FFFFFF;} + .d2-1671196375 .fill-B1{fill:#000410;} + .d2-1671196375 .fill-B2{fill:#0000E4;} + .d2-1671196375 .fill-B3{fill:#5AA4DC;} + .d2-1671196375 .fill-B4{fill:#E7E9EE;} + .d2-1671196375 .fill-B5{fill:#F5F6F9;} + .d2-1671196375 .fill-B6{fill:#FFFFFF;} + .d2-1671196375 .fill-AA2{fill:#008566;} + .d2-1671196375 .fill-AA4{fill:#45BBA5;} + .d2-1671196375 .fill-AA5{fill:#7ACCBD;} + .d2-1671196375 .fill-AB4{fill:#F1C759;} + .d2-1671196375 .fill-AB5{fill:#F9E088;} + .d2-1671196375 .stroke-N1{stroke:#000410;} + .d2-1671196375 .stroke-N2{stroke:#0000B8;} + .d2-1671196375 .stroke-N3{stroke:#9499AB;} + .d2-1671196375 .stroke-N4{stroke:#CFD2DD;} + .d2-1671196375 .stroke-N5{stroke:#C3DEF3;} + .d2-1671196375 .stroke-N6{stroke:#EEF1F8;} + .d2-1671196375 .stroke-N7{stroke:#FFFFFF;} + .d2-1671196375 .stroke-B1{stroke:#000410;} + .d2-1671196375 .stroke-B2{stroke:#0000E4;} + .d2-1671196375 .stroke-B3{stroke:#5AA4DC;} + .d2-1671196375 .stroke-B4{stroke:#E7E9EE;} + .d2-1671196375 .stroke-B5{stroke:#F5F6F9;} + .d2-1671196375 .stroke-B6{stroke:#FFFFFF;} + .d2-1671196375 .stroke-AA2{stroke:#008566;} + .d2-1671196375 .stroke-AA4{stroke:#45BBA5;} + .d2-1671196375 .stroke-AA5{stroke:#7ACCBD;} + .d2-1671196375 .stroke-AB4{stroke:#F1C759;} + .d2-1671196375 .stroke-AB5{stroke:#F9E088;} + .d2-1671196375 .background-color-N1{background-color:#000410;} + .d2-1671196375 .background-color-N2{background-color:#0000B8;} + .d2-1671196375 .background-color-N3{background-color:#9499AB;} + .d2-1671196375 .background-color-N4{background-color:#CFD2DD;} + .d2-1671196375 .background-color-N5{background-color:#C3DEF3;} + .d2-1671196375 .background-color-N6{background-color:#EEF1F8;} + .d2-1671196375 .background-color-N7{background-color:#FFFFFF;} + .d2-1671196375 .background-color-B1{background-color:#000410;} + .d2-1671196375 .background-color-B2{background-color:#0000E4;} + .d2-1671196375 .background-color-B3{background-color:#5AA4DC;} + .d2-1671196375 .background-color-B4{background-color:#E7E9EE;} + .d2-1671196375 .background-color-B5{background-color:#F5F6F9;} + .d2-1671196375 .background-color-B6{background-color:#FFFFFF;} + .d2-1671196375 .background-color-AA2{background-color:#008566;} + .d2-1671196375 .background-color-AA4{background-color:#45BBA5;} + .d2-1671196375 .background-color-AA5{background-color:#7ACCBD;} + .d2-1671196375 .background-color-AB4{background-color:#F1C759;} + .d2-1671196375 .background-color-AB5{background-color:#F9E088;} + .d2-1671196375 .color-N1{color:#000410;} + .d2-1671196375 .color-N2{color:#0000B8;} + .d2-1671196375 .color-N3{color:#9499AB;} + .d2-1671196375 .color-N4{color:#CFD2DD;} + .d2-1671196375 .color-N5{color:#C3DEF3;} + .d2-1671196375 .color-N6{color:#EEF1F8;} + .d2-1671196375 .color-N7{color:#FFFFFF;} + .d2-1671196375 .color-B1{color:#000410;} + .d2-1671196375 .color-B2{color:#0000E4;} + .d2-1671196375 .color-B3{color:#5AA4DC;} + .d2-1671196375 .color-B4{color:#E7E9EE;} + .d2-1671196375 .color-B5{color:#F5F6F9;} + .d2-1671196375 .color-B6{color:#FFFFFF;} + .d2-1671196375 .color-AA2{color:#008566;} + .d2-1671196375 .color-AA4{color:#45BBA5;} + .d2-1671196375 .color-AA5{color:#7ACCBD;} + .d2-1671196375 .color-AB4{color:#F1C759;} + .d2-1671196375 .color-AB5{color:#F9E088;}.appendix text.text{fill:#000410}.md{--color-fg-default:#000410;--color-fg-muted:#0000B8;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#000410;--color-border-muted:#0000E4;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0000E4;--color-accent-emphasis:#0000E4;--color-attention-subtle:#0000B8;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AB5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]> + + + + + + + +# D2 SCRIPT +HELLO -> WORLD# D2 SCRIPT +HELLO -> WORLDCOMPILERGRAPH(SHAPES & CONNECTIONS)CONFIGSGRAPH MODSLAYOUT + - +