OSOP Canva Visualizer

React app that converts .osop YAML into SVG workflow diagrams, designed for the Canva Apps SDK.

Features

• Paste .osop YAML → generate SVG flow diagram
• 12 node type colors matching OSOP spec
• Auto-layout with topological sorting
• Copy SVG or YAML to clipboard
• Responsive two-panel layout

Development

npm install
npm run dev    # Opens at http://localhost:3099
npm run build  # Production build to dist/

Publishing to Canva

1. Clone the Canva Apps SDK Starter Kit
2. Replace the app source with this project's src/ files
3. Add @canva/design SDK calls to the "Add to Design" button
4. Submit to Canva Apps Marketplace

Links

• OSOP Spec
• Visual Editor
• Canva Apps SDK