FlowRaw Component Overview

FlowRaw Component

The <flow-raw-component> is a read-only flow viewer that renders workflow diagrams without editing capabilities. It’s ideal for displaying executed workflows, previewing flows, or embedding flow visualizations in reports.

Registration

The component is registered as a Custom Element:

import { defineCustomElement } from 'vue';
import FlowRawCe from './view/FlowRaw.ce.vue';

// No browser hooks exposed - this is a pure viewer
customElements.define('flow-raw-component', defineCustomElement(FlowRawCe));

Features

Read-Only: No editing, dragging, or connecting nodes
Fit to View: Automatically fits the flow to the container on load
Execution Visualization: Can display execution states via edge styling
Lightweight: No sidebar, drawer, or editing infrastructure

Props

Prop	Type	Required	Description
`flow`	`string \| WorkFlow`	✅	Flow definition (JSON string or object)
`apps`	`string \| Array<App>`	✅	App definitions for node rendering

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// Flow data (from API or props)
const flowData = ref({
  nodes: [
    { id: 'n1', type: 'ion.action.trigger', position: { x: 100, y: 100 }, data: { label: 'Start' } },
    { id: 'n2', type: 'ion.action.http', position: { x: 300, y: 100 }, data: { url: 'https://api.example.com' } },
    { id: 'n3', type: 'ion.action.email', position: { x: 500, y: 100 }, data: { to: '[email protected]' } },
  ],
  edges: [
    { id: 'e1', source: 'n1', target: 'n2', type: 'custom' },
    { id: 'e2', source: 'n2', target: 'n3', type: 'custom' },
  ],
});

// App definitions (for rendering node icons and labels)
const apps = ref([
  { module: 'ion.action.trigger', label: 'Trigger', icon: 'play' },
  { module: 'ion.action.http', label: 'HTTP Request', icon: 'globe' },
  { module: 'ion.action.email', label: 'Send Email', icon: 'mail' },
]);
</script>

<template>
  <flow-raw-component
    :flow="flowData"
    :apps="apps"
    style="width: 100%; height: 400px;"
  />
</template>

<!DOCTYPE html>
<html>
<head>
  <script src="./dist/flowraw.js"></script>
  <style>
    flow-raw-component {
      display: block;
      width: 100%;
      height: 500px;
    }
  </style>
</head>
<body>
  <flow-raw-component id="flow-viewer"></flow-raw-component>

  <script>
    const viewer = document.getElementById('flow-viewer');

    // Set flow data as JSON string
    viewer.flow = JSON.stringify({
      nodes: [
        { id: 'n1', type: 'ion.action.trigger', position: { x: 100, y: 100 }, data: {} },
        { id: 'n2', type: 'ion.action.http', position: { x: 300, y: 100 }, data: {} },
      ],
      edges: [
        { id: 'e1', source: 'n1', target: 'n2', type: 'custom' }
      ]
    });

    // Set apps for node rendering
    viewer.apps = JSON.stringify([
      { module: 'ion.action.trigger', label: 'Trigger', icon: 'play' },
      { module: 'ion.action.http', label: 'HTTP', icon: 'globe' }
    ]);
  </script>
</body>
</html>

Displaying Execution State

You can visualize which path was taken during execution using edge data:

const flowWithExecution = {
  nodes: [
    { id: 'n1', type: 'ion.action.trigger', position: { x: 100, y: 100 }, data: {} },
    { id: 'n2', type: 'ion.action.condition', position: { x: 300, y: 100 }, data: {} },
    { id: 'n3', type: 'ion.action.http', position: { x: 500, y: 50 }, data: {} },
    { id: 'n4', type: 'ion.action.email', position: { x: 500, y: 150 }, data: {} },
  ],
  edges: [
    { id: 'e1', source: 'n1', target: 'n2', type: 'custom' },
    // This edge was taken (success path)
    {
      id: 'e2',
      source: 'n2',
      target: 'n3',
      type: 'custom',
      data: { diffEvent: 'success' }  // Renders as green
    },
    // This edge was not taken
    {
      id: 'e3',
      source: 'n2',
      target: 'n4',
      type: 'custom',
      data: { diffEvent: 'skipped' }  // Renders as gray/dashed
    },
  ],
};

Edge Styling by `diffEvent`

`diffEvent` Value	Visual Style
`success`	Green stroke
`error`	Red stroke
`skipped`	Gray dashed
(none)	Default muted

Comparison with Flow Component

Feature	`<flow-component>`	`<flow-raw-component>`
Edit nodes	✅	❌
Drag nodes	✅	❌
Connect edges	✅	❌
Sidebar	✅	❌
Node drawer	✅	❌
Browser hooks	`window.$useFlowCore`	None
Zoom/Pan	✅	✅
Fit to view	Manual	Automatic

Use Cases

Execution History: Display past workflow executions with success/error paths highlighted
Flow Preview: Show a thumbnail or preview of a workflow in a list
Documentation: Embed flow diagrams in help pages or reports
Comparison: Side-by-side visualization of workflow versions

TypeScript Types

interface WorkFlow {
  nodes: Array<{
    id: string;
    type: string;
    position: { x: number; y: number };
    data: Record<string, any>;
  }>;
  edges: Array<{
    id: string;
    type: 'custom';
    source: string;
    target: string;
    data?: {
      diffEvent?: 'success' | 'error' | 'skipped';
    };
  }>;
}

interface App {
  module: string;
  label: string;
  icon?: string;
  color?: string;
}