https://github.com/albertocavalcante/slidev-addon-d2
D2 diagram support for Slidev presentations
https://github.com/albertocavalcante/slidev-addon-d2
d2 slidev
Last synced: 4 months ago
JSON representation
D2 diagram support for Slidev presentations
- Host: GitHub
- URL: https://github.com/albertocavalcante/slidev-addon-d2
- Owner: albertocavalcante
- License: mit
- Created: 2026-02-15T09:13:14.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-02-15T12:58:59.000Z (4 months ago)
- Last Synced: 2026-02-15T15:39:28.558Z (4 months ago)
- Topics: d2, slidev
- Language: Vue
- Homepage: https://albertocavalcante.github.io/slidev-addon-d2/
- Size: 190 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Notice: NOTICE
- Agents: AGENTS.md
Awesome Lists containing this project
README
# slidev-addon-d2
D2 diagram support for [Slidev](https://sli.dev/) presentations. Write D2 in fenced code blocks, get rendered SVGs in your slides.
Uses the official [`@terrastruct/d2`](https://www.npmjs.com/package/@terrastruct/d2) WASM package for client-side rendering — no CLI installation required.
**[Documentation](https://albertocavalcante.github.io/slidev-addon-d2/)** | **[Live Demo](https://albertocavalcante.github.io/slidev-addon-d2/demo/)**
## Quick Start
The package is currently published to [GitHub Packages](https://github.com/albertocavalcante/slidev-addon-d2/packages). An npm release is coming soon.
Add a `.npmrc` to your project to configure the `@albertocavalcante` scope:
```ini
@albertocavalcante:registry=https://npm.pkg.github.com
```
Install the package:
```bash
bun add @albertocavalcante/slidev-addon-d2
```
Enable the addon in your slides frontmatter:
```yaml
---
addons:
- d2
---
```
Write a D2 diagram:
````markdown
```d2
user: User {shape: person}
api: API Server
db: PostgreSQL {shape: cylinder}
user -> api: HTTPS
api -> db: SQL
```
````
Pass options after the language identifier:
````markdown
```d2 {sketch: true, theme: 5, layout: 'elk'}
x -> y -> z
```
````
See the [documentation](https://albertocavalcante.github.io/slidev-addon-d2/) for all options, themes, and configuration details.
## Development
```bash
cd example
bun install
bun run dev
```
## License
MIT