From b833c6c98ec96eaa7ba5d410e218e1c0fd28fc69 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Fri, 13 Sep 2024 11:36:36 -0600 Subject: [PATCH] uml class example --- ci/render.sh | 2 + docs/tour/uml-classes.md | 9 ++ src/theme/CodeBlock/index.js | 3 + static/bespoke-d2/classes-3.d2 | 163 +++++++++++++++++++++++++ static/img/generated/classes-3.svg2 | 181 ++++++++++++++++++++++++++++ 5 files changed, 358 insertions(+) create mode 100644 static/bespoke-d2/classes-3.d2 create mode 100644 static/img/generated/classes-3.svg2 diff --git a/ci/render.sh b/ci/render.sh index 5b857a2..0e54366 100755 --- a/ci/render.sh +++ b/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() { diff --git a/docs/tour/uml-classes.md b/docs/tour/uml-classes.md index d54e187..4c7740e 100644 --- a/docs/tour/uml-classes.md +++ b/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:
+ +## Full example + + + {Classes3} + + +
diff --git a/src/theme/CodeBlock/index.js b/src/theme/CodeBlock/index.js index 01a9a49..5567e9b 100644 --- a/src/theme/CodeBlock/index.js +++ b/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"); }} > diff --git a/static/bespoke-d2/classes-3.d2 b/static/bespoke-d2/classes-3.d2 new file mode 100644 index 0000000..e96545c --- /dev/null +++ b/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 +} diff --git a/static/img/generated/classes-3.svg2 b/static/img/generated/classes-3.svg2 new file mode 100644 index 0000000..6ce2cd5 --- /dev/null +++ b/static/img/generated/classes-3.svg2 @@ -0,0 +1,181 @@ +Debit card+cardno+ownedBy+access()voidBank+code+address+manages()void+maintains()voidATM info+location+manageBy+identifies()void+transactions()voidCustomer+name+address+dob+owns()voidAccount+type+ownerATM Transaction+transactionId+date+type+modifies()voidCurrent account+accountNo+balance+debit()void+credit()voidSaving account+accountNo+balance+debit()void+credit()voidWithdrawl transaction+amount+Withdrawl()voidQuery transaction+query+type+queryProcessing()voidTransfer transaction+account+accountNoPin validation transaction+oldPin+newPin+pinChange()voidmanages1..*1maintains11+has11+owns0..*1..*+provides access to*1..*owns1..*1..*+identifies1* modifies*1 + + + + + + + + + +