Merge pull request #228 from terrastruct/uml-class

uml class example

ci/render.sh

@@ -31,6 +31,8 @@ _bespoke() {
   sh_c d2 ./static/bespoke-d2/triple-glob.d2 ./static/img/generated/triple-glob.pdf
 
   sh_c d2 --sketch ./static/bespoke-d2/grid-nested-connections.d2 ./static/img/generated/grid-nested-connections.svg2
+
+  sh_c d2 --dark-theme=200 -l elk -c --pad 0 ./static/bespoke-d2/classes-3.d2 ./static/img/generated/classes-3.svg2
 }
 
 main() {

docs/tour/uml-classes.md

@@ -1,6 +1,7 @@
 import CodeBlock from '@theme/CodeBlock';
 import Classes1 from '@site/static/d2/classes-1.d2';
 import Classes2 from '@site/static/d2/classes-2.d2';
+import Classes3 from '@site/static/bespoke-d2/classes-3.d2';
 
 # UML Classes
 
@@ -42,3 +43,11 @@ Here's an example with differing visibilities and more complex types:
 </CodeBlock>
 
 <div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-2.svg2')}}></div>
+
+## Full example
+
+<CodeBlock className="language-d2" layout="elk">
+    {Classes3}
+</CodeBlock>
+
+<div className="embedSVG" dangerouslySetInnerHTML={{__html: require('@site/static/img/generated/classes-3.svg2')}}></div>

src/theme/CodeBlock/index.js

@@ -163,6 +163,9 @@ export default function D2CodeBlock(props) {
           onClick={() => {
             const playgroundURL = new URL("https://play.d2lang.com");
             playgroundURL.searchParams.set("script", compressAndEncodeScript());
+            if (props.layout) {
+              playgroundURL.searchParams.set("layout", props.layout);
+            }
             window.open(playgroundURL, "_blank");
           }}
         >

static/bespoke-d2/classes-3.d2

@@ -0,0 +1,163 @@
+DebitCard: Debit card {
+  shape: class
+  +cardno
+  +ownedBy
+
+  +access()
+}
+
+Bank: {
+  shape: class
+  +code
+  +address
+
+  +manages()
+  +maintains()
+}
+
+ATMInfo: ATM info {
+  shape: class
+  +location
+  +manageBy
+
+  +identifies()
+  +transactions()
+}
+
+Customer: {
+  shape: class
+  +name
+  +address
+  +dob
+
+  +owns()
+}
+
+Account: {
+  shape: class
+  +type
+  +owner
+}
+
+ATMTransaction: ATM Transaction {
+  shape: class
+  +transactionId
+  +date
+  +type
+
+  +modifies()
+}
+
+CurrentAccount: Current account {
+  shape: class
+  +accountNo
+  +balance
+
+  +debit()
+  +credit()
+}
+
+SavingAccount: Saving account {
+  shape: class
+  +accountNo
+  +balance
+
+  +debit()
+  +credit()
+}
+
+WidthdrawlTransaction: Withdrawl transaction {
+  shape: class
+  +amount
+
+  +Withdrawl()
+}
+
+QueryTransaction: Query transaction {
+  shape: class
+  +query
+  +type
+
+  +queryProcessing()
+}
+
+TransferTransaction: Transfer transaction {
+  shape: class
+  +account
+  +accountNo
+}
+
+PinValidation: Pin validation transaction {
+  shape: class
+  +oldPin
+  +newPin
+
+  +pinChange()
+}
+
+DebitCard -- Bank: manages {
+  source-arrowhead: 1..*
+  target-arrowhead: 1
+}
+
+Bank -- ATMInfo: maintains {
+  source-arrowhead: 1
+  target-arrowhead: 1
+}
+
+Bank -- Customer: +has {
+  source-arrowhead: 1
+  target-arrowhead: 1
+}
+
+DebitCard -- Customer: +owns {
+  source-arrowhead: 0..*
+  target-arrowhead: 1..*
+}
+
+DebitCard -- Account: +provides access to {
+  source-arrowhead: *
+  target-arrowhead: 1..*
+}
+
+Customer -- Account: owns {
+  source-arrowhead: 1..*
+  target-arrowhead: 1..*
+}
+
+ATMInfo -- ATMTransaction: +identifies {
+  source-arrowhead: 1
+  target-arrowhead: *
+}
+
+ATMTransaction -> Account: modifies {
+  source-arrowhead: *
+  target-arrowhead: 1
+}
+
+CurrentAccount -> Account: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}
+
+SavingAccount -> Account: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}
+
+WidthdrawlTransaction -> ATMTransaction: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}
+QueryTransaction -> ATMTransaction: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}
+TransferTransaction -> ATMTransaction: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}
+PinValidation -> ATMTransaction: {
+  target-arrowhead.shape: triangle
+  target-arrowhead.style.filled: false
+}