d2 support

[a-h]

I'm finding Terrastruct's D2 to be really useful for architecture diagrams and I'd love for it to be better integrated into slidev.

https://github.com/terrastruct/d2

Describe the solution you'd like

Ideally, I'd be able to have the D2 diagram code in the slidev project, and it would be updated automatically, like mermaid.js

Describe alternatives you've considered

At the moment, to use it, I create diagrams in /diagrams, e.g. /diagrams/08-dead-letter.d2

style: {
  fill: transparent
}

direction: right

lambda: Lambda
lambda: {
  icon: https://icons.terrastruct.com/aws%2FCompute%2FAWS-Lambda.svg
}
sqs: SQS DLQ
sqs: {
  icon: https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-Simple-Queue-Service-SQS.svg
}
eb: "EventBridge"
eb: {
  icon: https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-EventBridge.svg
}
cloudwatch: CloudWatch Alarm
cloudwatch: {
  icon: https://icons.terrastruct.com/aws%2FManagement%20&%20Governance%2FAmazon-CloudWatch.svg
}
sns: SNS
sns: {
  icon: https://icons.terrastruct.com/aws%2FApplication%20Integration%2FAmazon-Simple-Notification-Service-SNS.svg
}
eb -> lambda: event
lambda -> sqs: onFailure
sqs <- cloudwatch: Check depth
cloudwatch -> sns: Notify OpsGenie

Then run a script in that directory to generate everything and move it to public.

ls *.d2 | xargs -I {} ~/go/bin/d2 --layout=elk --theme=200 {}
mv *.svg ../public

I then have to put a link to the SVG diagram in my presentation.

<img src="/01-static.svg" style="width: 100%; height: 100%;" />

It's OK, but native support would be ideal.

[twitwi]

Very interesting.
There seem to already be a browser (WASM) build of d2, used for the playground (and currently being improved terrastruct/d2#436 ) so it could be directly integrated in the browser, like mermaid, without running external tools.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[hacker1024]

Can this be re-opened?

[kermanx]

Can this be re-opened?

Markdown transformer is now supported. Making an addon that renders D2 diagrams in your slides is possible.