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 @@
+