Creating diagrams-js Plugins

Create custom plugins to extend diagrams-js with import/export formats, metadata providers, and hooks. Plugins enable integration with infrastructure-as-code tools, CI/CD pipelines, and cloud providers.

Plugin Architecture

Core Principles

1. Never import from diagrams-js - Access runtime exports via context.lib to avoid multiple library instances. Type imports are allowed
2. Use context.loadResourcesList() - Dynamically discover provider icons and resources
3. Use context.loadYaml() - Parse and serialize YAML without bundling dependencies
4. Convert to/from JSON - Use diagrams-js JSON format as the intermediary for imports
5. Factory Functions - You may create plugins as factory functions if configuration may be needed

Package Structure