slidev-addon-bpmn 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Marco Stephan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,80 @@
+# 📊 slidev-addon-bpmn
+
+[![npm version](https://img.shields.io/npm/v/slidev-addon-bpmn)](https://www.npmjs.com/package/slidev-addon-bpmn)
+[![license](https://img.shields.io/npm/l/slidev-addon-bpmn)](https://github.com/emaarco/slidev-addon-bpmn/blob/main/LICENSE)
+
+Display BPMN 2.0 diagrams in your [Slidev](https://sli.dev/) presentations. Whether you're presenting workflow designs, explaining process automation, or teaching BPMN concepts — this addon has you covered! 💡
+
+Powered by [bpmn-js](https://bpmn.io/toolkit/bpmn-js/) from bpmn.io.
+
+![Example BPMN diagram in Slidev](./public/example-slide.png)
+
+## 🚀 Quick Start
+
+1. Install the addon in your Slidev project
+2. Place your `.bpmn` files in the `public/` folder
+3. Use the `<Bpmn>` component in your slides
+
+That's it — your BPMN diagrams are ready to present!
+
+## 📦 Installation
+
+```bash
+npm install slidev-addon-bpmn
+```
+
+Then register the addon in your slide's frontmatter:
+
+```yaml
+---
+addons:
+  - slidev-addon-bpmn
+---
+```
+
+Or in your `package.json`:
+
+```json
+{
+  "slidev": {
+    "addons": ["slidev-addon-bpmn"]
+  }
+}
+```
+
+## 🔧 Usage
+
+```vue
+<Bpmn
+  bpmnFilePath="./my-process.bpmn"
+  class="w-[800px]"
+/>
+```
+
+The component fetches your BPMN file, renders it using bpmn-js, and exports it as a crisp SVG that scales beautifully at any size.
+
+## ⚙️ Props
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `bpmnFilePath` | `string` | *required* | Path to the `.bpmn` file (relative to `public/`) |
+| `width` | `string` | `'100%'` | Maximum width of the diagram |
+| `height` | `string` | `'auto'` | Height of the diagram |
+
+## 💡 Tips
+
+- **File location**: BPMN files must be placed in the `public/` folder
+- **Supported formats**: Standard BPMN 2.0 XML files (exported from Camunda Modeler, bpmn.io, etc.)
+- **Styling**: Use Tailwind classes via the `class` prop to control sizing
+- **Export**: Works seamlessly with Slidev's PDF/PNG export features
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to report bugs, suggest features via [issues](https://github.com/emaarco/slidev-addon-bpmn/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
+
+- [bpmn-js](https://github.com/bpmn-io/bpmn-js) by [bpmn.io](https://bpmn.io/)
+- Inspired by [slidev-addon-excalidraw](https://github.com/haydenull/slidev-addon-excalidraw)

package/components/Bpmn.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <p v-if="loading">Loading BPMN diagram...</p>
+    <p v-if="error" class="text-red-500">{{ error }}</p>
+    <div v-if="svg" v-html="svg"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import 'bpmn-js/dist/assets/bpmn-js.css'
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const svg = ref<string | null>(null)
+
+const props = withDefaults(defineProps<{
+  bpmnFilePath: string
+  width?: string
+  height?: string
+}>(), {
+  width: '100%',
+  height: 'auto',
+})
+
+onMounted(async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    await loadAndRenderBpmn(props.bpmnFilePath)
+  } catch (err) {
+    error.value = `Failed to load BPMN: ${err instanceof Error ? err.message : String(err)}`
+    console.error('BPMN loading error:', err)
+  } finally {
+    loading.value = false
+  }
+})
+
+async function loadAndRenderBpmn(path: string): Promise<void> {
+  const url = new URL(path, window.location.origin + import.meta.env.BASE_URL).href
+  const response = await fetch(url)
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch BPMN file: ${response.status}`)
+  }
+
+  const bpmnXml = await response.text()
+
+  // Create off-screen container for bpmn-js rendering (requires DOM element)
+  // Fixed 1920x1080 size may clip large diagrams or waste space for small ones
+  // If this causes issues, we should consider auto-detecting diagram bounds or using viewBox-based sizing
+  const container = document.createElement('div')
+  container.style.width = '1920px'
+  container.style.height = '1080px'
+  container.style.position = 'absolute'
+  container.style.left = '-9999px'
+  document.body.appendChild(container)
+
+  try {
+    const viewer = new BpmnViewer({ container })
+    await viewer.importXML(bpmnXml)
+
+    const { svg: svgContent } = await viewer.saveSVG()
+
+    const parser = new DOMParser()
+    const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml')
+    const svgElement = svgDoc.documentElement
+
+    svgElement.style.maxWidth = props.width
+    svgElement.style.height = props.height
+    svgElement.setAttribute('preserveAspectRatio', 'xMidYMid meet')
+
+    svg.value = svgElement.outerHTML
+
+    viewer.destroy()
+  } finally {
+    document.body.removeChild(container)
+  }
+}
+</script>

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "slidev-addon-bpmn",
+  "version": "0.0.1",
+  "description": "Display BPMN 2.0 diagrams in Slidev presentations",
+  "type": "module",
+  "scripts": {
+    "dev": "slidev example.md",
+    "build": "slidev build example.md",
+    "export": "slidev export example.md",
+    "screenshot": "slidev export example.md --format png"
+  },
+  "author": "Marco Schäck (https://github.com/emaarco)",
+  "license": "MIT",
+  "devDependencies": {
+    "@slidev/cli": "0.49.11",
+    "@slidev/theme-default": "0.25.0"
+  },
+  "keywords": [
+    "slidev",
+    "slidev-addon",
+    "bpmn",
+    "bpmn-js",
+    "bpmn.io",
+    "diagram",
+    "workflow",
+    "process"
+  ],
+  "files": [
+    "components"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/emaarco/slidev-addon-bpmn.git"
+  },
+  "bugs": {
+    "url": "https://github.com/emaarco/slidev-addon-bpmn/issues"
+  },
+  "homepage": "https://github.com/emaarco/slidev-addon-bpmn#readme",
+  "dependencies": {
+    "bpmn-js": "^18.11.0"
+  }
+}