OSS探訪
GitHubで見るプロジェクトサイト

Vue Flow — Vue 3でノードとエッジを操作できるフローチャートUIを組み立てる

OSS規模スコア 213.1OSS健全度 63更新ペース 0 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
6,867
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/07/14

概要

Vue Flowは、Vue 3アプリにノードとエッジで構成するフローチャートやノードエディタを追加するコンポーネントライブラリです。ズーム、パン、選択、ドラッグ、カスタムノード、MiniMapなどを組み合わせられます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

ノードとエッジをVueの状態として操作する

各ノードに一意なIDと位置を持たせ、エッジにsourceとtargetを指定してグラフを構成します。

出典：[2][3]

ズーム・パン・MiniMap・独自ノードを追加する

標準の操作に加えて、独自ノードやエッジ、接続線、MiniMap、Controlsなどを組み合わせられます。

出典：[2]

ワークフロー編集や構成図の操作UIに

処理フロー、業務ワークフロー、依存関係などをノードと線で編集・閲覧するVue 3アプリに向きます。

出典：[2]

Vue 2には対応しない

READMEはVue 3固有機能を使うためVue 2をサポートしないと明記しています。また必須CSSはscopedにせず読み込む必要があります。

出典：[2]

参考にした公式資料

  1. [1]bcakmakoglu/vue-flow repository(2026-09-21)
  2. [2]Vue Flow README(2026-09-21)
  3. [3]Vue Flow getting started(2026-09-21)
  4. [4]@vue-flow/core package(2026-09-21)
  5. [5]Vue Flow MIT license(2026-09-21)
編集部からの補足

Vue FlowはVue 3専用で、READMEはVue 2非対応を明記しています。現在の`@vue-flow/core`は1.48.2です。図の見た目だけでなく、ノードID、位置、エッジのsource/targetをアプリ側の状態としてどう管理するかまで含めて設計する必要があります。

3ステップで試す

  1. 1

    Vue Flowを追加

    Vue 3プロジェクトへコアパッケージを追加します。

    npm i @vue-flow/core
  2. 2

    VueFlowコンポーネントと必須CSSを読み込む

    READMEのQuickstartに沿ってVueFlowを読み込み、必須スタイルをscopedにせず追加します。

    import { VueFlow } from '@vue-flow/core' + @import '@vue-flow/core/dist/style.css'
  3. 3

    ノードとエッジを表示

    一意なIDと位置を持つノード、source/targetを持つエッジを渡して最小のフローチャートを確認します。

    Pass nodes with id/position and edges with source/target
公式READMEで確認

成長

成長の推移 · 直近30日

6,867 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
0
Open PR
7

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • vue
  • vue3
  • flowchart
  • typescript
  • javascript
  • diagrams
  • flow
  • turborepo
  • vite
  • vitepress
Stars
6,867
Forks
412
Watchers
44
Open Issues
12
Contributors
29
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2026/07/14
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。