OSOP Workflow Viewer — FigJam Plugin

Paste any .osop YAML and instantly generate an interactive flow diagram on your FigJam or Figma canvas.

Features

• Parse .osop YAML and render nodes as color-coded shapes
• Auto-layout with topological sorting (left-to-right flow)
• Connectors between nodes with edge mode labels
• 12 node type colors (human, agent, api, cli, db, system, cicd, infra, etc.)
• Edge styling: solid (sequential), dashed (conditional/loop), dotted (fallback/error), thick (parallel)

Installation

1. Open Figma Desktop (Mac or Windows)
2. Go to Plugins → Development → Import plugin from manifest
3. Select the manifest.json file from this directory
4. The plugin appears under Plugins → OSOP Workflow Viewer

Development

npm install
npm run build    # Compile TypeScript
npm run watch    # Watch mode

Usage

1. Open a FigJam or Figma file
2. Run the plugin: Plugins → OSOP Workflow Viewer
3. Paste your .osop YAML in the text area
4. Click Generate Diagram
5. The workflow appears on your canvas

Publishing

To publish to Figma Community:

1. Enable 2FA on your Figma account
2. Use Figma Desktop → Plugins → Manage → Publish
3. First review takes 5-10 business days

Links

• OSOP Spec — Protocol definition
• Visual Editor — Web-based OSOP editor
• OSOP Website — Docs and examples