Copyright © 2020-2027. All rights reserved.
|| Privacy PolicyCreate, export, and embed visual API workflows with OpenAPI integration
Build visual API workflows in 4 simple steps. Perfect for documenting complex API interactions and creating embeddable workflow diagrams.
Drag & drop your OpenAPI JSON/YAML file or click “Load Sample OpenAPI” to get started with pre-built endpoints
Drag API endpoints from the left sidebar onto the canvas to create workflow nodes with automatic configuration
Connect nodes using success (✅) and failure (❌) handles to build logical workflow paths
Choose “Export Workflow” for editing or “Export for Embed” for website integration
Click “Load Sample OpenAPI” and “Load Sample Workflow” to explore features with pre-built content before uploading your own API schema.
Use the Test Viewer to preview and test workflow visualizations with different themes and sample data.
Test your workflow visualizations with predefined samples or custom JSON data.
Support for OpenAPI 3.0 JSON and YAML formats with automatic endpoint parsing and validation
Intuitive drag-and-drop interface to add API endpoints to your workflow canvas
Automatic parsing of HTTP methods, paths, descriptions, tags, and operation IDs
Green connectors (✅) represent successful API call paths and positive outcomes
Red connectors (❌) represent error handling paths and fallback scenarios
Click nodes to edit names, descriptions, images, and documentation links
Custom display name for the workflow step (overrides API endpoint name)
Detailed explanation of what this step does in your workflow
Link to external API documentation or additional resources
Upload local images for visual representation of the API endpoint
Use images from external URLs (consider CORS policies)
HTTP method, path, and operation ID automatically extracted from OpenAPI
Choose the right export format based on your use case. Each option is optimized for different scenarios.
Download the required files and see the workflow viewer in action.
Use these URLs to include the workflow viewer in any website without downloading files:
https://od2.in/api-wd/workflow-viewer.csshttps://od2.in/api-wd/workflow-viewer.js<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>Main workflow viewer script with all functionality
Download JSInteractive demo with CDN integration examples and theme switching
Open DemoBoth pages open in new tabs for easy testing alongside your development
od2ApiWorkflowRenderer()https://od2.in/api-wd/workflow-viewer.csshttps://od2.in/api-wd/workflow-viewer.jsUse the OD2 public CDN URLs for instant access, or download and host the files yourself.
Embed your workflows in any website using our self-hosted CDN files. No external dependencies, full control over hosting and versioning.
Use the global od2ApiWorkflowRenderer function for quick and easy embedding:
<!DOCTYPE html>
<html>
<head>
<!-- Include OD2 Public CDN -->
<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>
</head>
<body>
<!-- Workflow Container -->
<div id="my-workflow" style="height: 500px;"></div>
<!-- Simple API - just pass container ID and JSON data -->
<script>
// Your workflow data (from API, file, or inline)
const workflowData = {
name: "My Workflow",
nodes: [...],
edges: [...]
};
// Render the workflow
od2ApiWorkflowRenderer('my-workflow', workflowData);
</script>
</body>
</html>For more control, use the full OD2WorkflowViewer API:
<!DOCTYPE html>
<html>
<head>
<!-- Include OD2 Public CDN -->
<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>
</head>
<body>
<!-- Workflow Container -->
<div id="my-workflow" style="height: 500px;"></div>
<!-- Initialize Viewer -->
<script>
OD2WorkflowViewer.render({
container: '#my-workflow',
workflowUrl: './my-workflow_embed_flow.json',
theme: 'light',
fitView: true,
interactive: true
});
</script>
</body>
</html>Basic function call:
od2ApiWorkflowRenderer(containerId, jsonData)With options:
od2ApiWorkflowRenderer('my-workflow', data, {
theme: 'dark',
height: '600px',
interactive: true
})containerCSS selector or DOM elementworkflowUrlPath to embed flow JSONtheme‘light’, ‘dark’, or ‘auto’interactiveEnable pan/zoom/dragfitViewAuto-fit to containerAlways use “Export for Embed” for website integration to ensure optimal file size and loading performance
Test embed flow JSON files in a staging environment before production deployment
Set explicit container dimensions (height/width) for consistent layout across devices
Include API documentation links in nodes for interactive and informative workflows
Consider using interactive: false for mobile users to improve touch interaction
Using full workflow export instead of embed flow export causes slower loading and larger file sizes
Not setting container height causes layout issues and invisible workflow displays
External image URLs may be blocked by CORS policies - use local images when possible
Scripts loading before DOM is ready - ensure proper script placement or use DOMContentLoaded
Missing error handling for JSON fetch failures - check network tab for loading issues
Complete implementation examples and function details for the od2ApiWorkflowRenderer function.
// Global function available after including workflow-viewer.js
od2ApiWorkflowRenderer(containerId, workflowData, options)
Parameters:
containerId (string) - Container element ID (without #)
workflowData (object) - Workflow JSON from "Export for Embed"
options (object) - Optional configuration object
Returns:
WorkflowRenderer instance for advanced control<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My API Workflow</title>
<!-- Include OD2 Workflow Viewer CSS -->
<link rel="stylesheet" href="https://od2.in/api-wd/workflow-viewer.css">
</head>
<body>
<!-- Container with explicit dimensions -->
<div id="api-workflow" style="
width: 100%;
height: 500px;
border: 1px solid #ddd;
border-radius: 8px;
"></div>
<!-- Include OD2 Workflow Viewer JavaScript -->
<script src="https://od2.in/api-wd/workflow-viewer.js"></script>
<script>
// Load and render workflow
fetch('./my-api-workflow_embed_flow.json')
.then(response => response.json())
.then(workflowData => {
od2ApiWorkflowRenderer('api-workflow', workflowData);
})
.catch(error => {
console.error('Failed to load workflow:', error);
});
</script>
</body>
</html>// Advanced usage with all configuration options
od2ApiWorkflowRenderer('my-workflow', workflowData, {
// Visual Options
theme: 'dark', // 'light', 'dark', or 'auto'
width: '100%', // Container width
height: '600px', // Container height
// Interaction Options
interactive: true, // Enable pan/zoom/drag
showControls: true, // Show zoom controls
fitView: true, // Auto-fit workflow to container
// Event Handlers
onNodeClick: function(node) {
console.log('Node clicked:', node.data.name);
// Open API documentation
if (node.data.apiDocumentationLink) {
window.open(node.data.apiDocumentationLink, '_blank');
}
// Custom analytics tracking
analytics.track('workflow_node_clicked', {
nodeName: node.data.name,
method: node.data.method,
path: node.data.path
});
},
// Error Handling
onError: function(error) {
console.error('Workflow error:', error);
alert('Failed to load workflow: ' + error.message);
}
});Need Additional Help?
Ensure your embed flow JSON is properly formatted and accessible from your website. For OpenAPI schema issues, verify that each endpoint includes an operationId.
Check browser console for loading errors and verify all local CDN files are properly hosted.
Copyright © 2020-2027. All rights reserved.
|| Privacy Policy