cloudflare-graph

Tailwind-native Vue components for rendering Cloudflare Workflow graphs.

• 📦 Package: packages/@cloudflare-graph/vue
• 🧪 Demo app: playgrounds/vue

Installation

pnpm add @cloudflare-graph/vue vue

Usage

<script setup lang="ts">
import type { WorkflowGraphWorkflow } from '@cloudflare-graph/vue'
import { ScrollableViewport, WorkflowGraph } from '@cloudflare-graph/vue'

const workflow: WorkflowGraphWorkflow = {
	class_name: 'deploy-workflow',
	functions: {},
	nodes: [],
	payload: { type: 'unknown' },
}
</script>

<template>
	<ScrollableViewport class="h-128 w-full" viewport-class="size-full" content-class="min-h-full min-w-full w-max">
		<WorkflowGraph :workflow="workflow" />
	</ScrollableViewport>
</template>

More details (configuration, Tailwind integration, etc.) are in the package README:
packages/@cloudflare-graph/vue/README.md.

Development

This repo is a pnpm workspace.

• Install: pnpm install --frozen-lockfile
• Lint: pnpm run lint
• Test: pnpm run test
• Build packages: pnpm run build
• Build playgrounds: pnpm run build:playgrounds
• Run Vue playground: pnpm --filter vue dev

Sponsors

License

MIT License © 2026-PRESENT Estéban Soubiran