📊 slidev-addon-dmn

Display DMN decision tables and DRD diagrams in your Slidev presentations. Whether you're presenting decision logic, explaining business rules, or teaching DMN concepts — this addon has you covered! 💡

Powered by dmn-js from bpmn.io.

🚀 Quick Start

1. Install the addon in your Slidev project
2. Place your .dmn files in the public/ folder
3. Use the <DmnDrd> or <DmnTable> components in your slides

That's it — your DMN diagrams are ready to present!

Example Slide

📦 Installation

npm install slidev-addon-dmn

Then register the addon in your slide's frontmatter:

---
addons:
  - slidev-addon-dmn
---

Or in your package.json:

{
  "slidev": {
    "addons": ["slidev-addon-dmn"]
  }
}

🧩 Components

This addon provides two complementary components for different use cases:

• <DmnDrd> - Static DRD rendering for PDFs, presentations, and documentation
• <DmnTable> - Decision Table rendering for visualizing business rules

🔧 Component Reference

DmnDrd Component

Renders Decision Requirements Diagrams as static SVG images. Perfect for PDF exports and presentations.

<DmnDrd
  dmnFilePath="./my-decisions.dmn"
  width="100%"
  height="400px"
/>

Props:

Name	Type	Default	Description
dmnFilePath	string	required	Path to the .dmn file (relative to public/)
width	string	'100%'	Maximum width of the diagram
height	string	'auto'	Height of the diagram
fontSize	string	'12px'	Font size of the diagram labels

DmnTable Component

Renders DMN Decision Tables directly in the slide. Perfect for presenting business rules and decision logic.

<DmnTable
  dmnFilePath="./my-decisions.dmn"
  width="100%"
  decisionId="Decision_Dish"
/>

Props:

Name	Type	Default	Description
dmnFilePath	string	required	Path to the .dmn file (relative to public/)
width	string	'100%'	Width of the table container
height	string	'auto'	Height of the table container (defaults to 500px when 'auto')
decisionId	string	first found	ID of the decision to display (optional, defaults to the first decision table)
fontSize	string	'12px'	Font size of the table content
showAnnotations	boolean	false	Show or hide the annotations column

💡 Tips

• File location: DMN files must be placed in the public/ folder
• Supported formats: Standard DMN 1.3 XML files (exported from Camunda Modeler, bpmn.io, etc.)
• Multiple decisions: Use the decisionId prop to select a specific decision table when your DMN file contains multiple decisions
• Styling: Use Tailwind classes via the class prop to control sizing
• Export: The <DmnDrd> component works seamlessly with Slidev's PDF/PNG export features

🔗 Related

Looking for BPMN? If you're modeling business processes alongside your decisions, check out slidev-addon-bpmn — the sister addon for rendering BPMN diagrams in Slidev!

🤝 Contributing

Contributions are welcome! Feel free to report bugs, suggest features via issues, submit pull requests with improvements, or share your ideas and use cases.

To develop locally: clone the repo, run npm install, then npm run dev to test your changes.

🙏 Credits

• dmn-js by bpmn.io
• bavaria-ipsum - for making the example slide a little more entertaining 🥨