plait-board/drawnix

⭐ 10,133 🍴 738 TypeScript📄 MIT License GitHubで見る →

主な特徴

  • **無料オープンソース**: MIT ライセンスによる完全無料利用
  • **統合型ホワイトボード**: マインドマップ、フローチャート、自由描画を一つのキャンバスで
  • **プラグインアーキテクチャ**: 拡張可能な設計で新機能追加が容易
  • **マルチフレームワーク対応**: React、Angular等のUIフレームワークサポート
  • **リッチテキスト統合**: Slateエディターによる高度なテキスト編集
  • **ファイルエクスポート**: PNG、JSON(.drawnix)形式での保存
  • **無限キャンバス**: ズーム、パン操作による自由な作業空間
  • **自動保存**: ブラウザーストレージによるデータ保護
  • **モバイル対応**: レスポンシブデザインによるタブレット・スマホ対応
  • **Mermaid/Markdown対応**: コードからのダイアグラム自動生成

リポジトリ解析: plait-board/drawnix

基本情報

  • リポジトリ名: plait-board/drawnix
  • 主要言語: TypeScript
  • スター数: 10,133
  • フォーク数: 738
  • 最終更新: 2025年8月6日（v0.2.1 - ホットキー修正）
  • ライセンス: MIT License
  • トピックス: whiteboard, mind mapping, flowchart, drawing, open source, SaaS, plugin architecture

概要

一言で言うと

オープンソースの多機能オンラインホワイトボードツール。思考整理から図表作成まで、創造的作業を支援する統合プラットフォーム。

詳細説明

Drawnixは、PingCode社が開発するオープンソースのホワイトボードSaaS製品です。独自開発のPlait画図フレームワークをベースに、思維導図（マインドマップ）、流程図（フローチャート）、自由描画等の機能を統合した「All-in-one」型のコラボレーションツールとして設計されています。プラグインアーキテクチャを採用し、React/Angularなど複数のUIフレームワークに対応。Slateリッチテキストエディター統合により高度なテキスト処理も可能です。

主な特徴

  • 無料オープンソース: MIT ライセンスによる完全無料利用
  • 統合型ホワイトボード: マインドマップ、フローチャート、自由描画を一つのキャンバスで
  • プラグインアーキテクチャ: 拡張可能な設計で新機能追加が容易
  • マルチフレームワーク対応: React、Angular等のUIフレームワークサポート
  • リッチテキスト統合: Slateエディターによる高度なテキスト編集
  • ファイルエクスポート: PNG、JSON(.drawnix)形式での保存
  • 無限キャンバス: ズーム、パン操作による自由な作業空間
  • 自動保存: ブラウザーストレージによるデータ保護
  • モバイル対応: レスポンシブデザインによるタブレット・スマホ対応
  • Mermaid/Markdown対応: コードからのダイアグラム自動生成

使用方法

インストール

前提条件

  • Node.js 18.x以上
  • npm または yarn パッケージマネージャー
  • モダンブラウザー（Chrome、Firefox、Safari、Edge）
  • 開発環境：TypeScript 5.4+、React 18.3+

インストール手順

# 方法1: オンラインで直接利用
# https://drawnix.com にアクセス

# 方法2: ローカル開発環境構築
git clone https://github.com/plait-board/drawnix.git
cd drawnix
npm install
npm run start
# localhost:7200 でアクセス可能

# 方法3: Docker利用
docker pull pubuzhixing/drawnix:latest
docker run -p 7200:7200 pubuzhixing/drawnix:latest

基本的な使い方

ホワイトボード作成

// Drawnixコンポーネントの基本実装例
import { Drawnix } from '@drawnix/drawnix';

function MyWhiteboard() {
  return (
    <Drawnix
      plugins={[
        // 思維導図プラグイン
        mindPlugin(),
        // フローチャートプラグイン 
        drawPlugin(),
        // 自由描画プラグイン
        freehandPlugin()
      ]}
      theme="light" // light | dark
      autoSave={true}
    />
  );
}

実践的な使用例

// カスタムプラグイン開発とMarkdown連携
import { markdownToDrawnix } from '@plait-board/markdown-to-drawnix';
import { mermaidToDrawnix } from '@plait-board/mermaid-to-drawnix';

// Markdownからマインドマップ生成
const mindMapData = markdownToDrawnix(`
# プロジェクト企画
## 要件定義
### 機能要件
### 非機能要件
## 設計
### UI/UX設計
### システム設計
`);

// Mermaidコードからフローチャート生成
const flowChartData = mermaidToDrawnix(`
graph TD
    A[開始] --> B{判定}
    B -->|YES| C[処理A]
    B -->|NO| D[処理B]
    C --> E[終了]
    D --> E
`);

高度な使い方

// プラグイン開発とイベントハンドリング
import { PlaitPlugin, PlaitBoard } from '@plait/core';

// カスタムプラグイン開発例
const customPlugin: PlaitPlugin = {
  key: 'custom-feature',
  initializeBoard: (board: PlaitBoard) => {
    // カスタム初期化処理
  },
  onKeyDown: (event: KeyboardEvent) => {
    // キーボードイベント処理
  },
  onPointerDown: (event: PointerEvent) => {
    // ポインターイベント処理
  }
};

// データ永続化とエクスポート機能
const exportBoard = async (board: PlaitBoard) => {
  // JSON形式でエクスポート
  const jsonData = board.toJSON();
  
  // PNG画像としてエクスポート
  const canvas = board.toCanvas();
  const pngBlob = await canvas.toBlob();
  
  // ファイルダウンロード
  downloadFile(pngBlob, 'whiteboard.png');
};

ドキュメント・リソース

公式ドキュメント

  • README.md: プロジェクト概要、特徴、開発手順の日本語版
  • README_en.md: 英語版ドキュメント（国際化対応）
  • CHANGELOG.md: バージョン履歴と機能追加・修正の詳細
  • packages/*/README.md: 各パッケージ個別のAPIドキュメント
  • 公式サイト: https://drawnix.com （ライブデモ・利用ガイド）

サンプル・デモ

  • オンラインデモ: drawnix.com でリアルタイム体験可能
  • GitHubスクリーンショット: product_showcase/case-2.png
  • Plaitフレームワーク: 基盤となる画図エンジンのデモ
  • プラグイン実装例: packages/drawnix/src/plugins/ 内の実装サンプル

チュートリアル・ガイド

  • 開発者向けガイド: NX monorepoでの開発フロー
  • プラグイン開発: カスタム機能追加のためのAPI仕様
  • コントリビューション: オープンソース貢献の手順
  • Dockerデプロイ: コンテナ化による本番環境構築
  • HelloGitHub: 中国語コミュニティでの紹介・解説

技術的詳細

アーキテクチャ

全体構造

NXモノレポベースのマイクロフロントエンド設計。Plaitコアエンジンを基盤とし、プラグインアーキテクチャによる機能分割を実現。React 18のコンポーネント化により、各描画機能（Mind、Draw、Text）を独立モジュールとして開発・保守。Viteビルドシステムにより高速な開発体験と最適化されたプロダクションビルドを提供。

ディレクトリ構成

drawnix/
├── apps/
│   └── web/              # メインWebアプリケーション
│       ├── index.html    # エントリーポイント
│       └── vite.config.ts # ビルド設定
├── packages/
│   ├── drawnix/          # 統合ホワイトボードアプリケーション
│   │   ├── src/
│   │   │   ├── components/   # UIコンポーネント群
│   │   │   ├── plugins/      # 機能プラグイン
│   │   │   ├── hooks/        # React Hooks
│   │   │   └── utils/        # ユーティリティ
│   │   └── package.json
│   ├── react-board/     # Reactホワイトボードビューレイヤー
│   └── react-text/      # テキスト描画モジュール
├── dist/                 # ビルド出力
├── scripts/              # リリース・公開スクリプト
└── nx.json              # NXワークスペース設定

主要コンポーネント

  • Drawnixコア: 統合ホワイトボードアプリケーション本体

    • 場所: packages/drawnix/src/drawnix.tsx
    • 依存: @plait/core, @plait/mind, @plait/draw
    • インターフェース: プラグイン管理、イベント処理、データ永続化

  • ReactBoard: React統合レイヤー

    • 場所: packages/react-board/src/board.tsx
    • 依存: React 18.3+、Plaitエンジン
    • インターフェース: useBoard、useBoardEvent フック

  • プラグインシステム: 機能拡張アーキテクチャ

    • 場所: packages/drawnix/src/plugins/
    • 依存: プラグインインターフェース仕様
    • インターフェース: with-* 高次関数パターン

技術スタック

コア技術

  • 言語: TypeScript 5.4+（型安全性、最新ES機能活用）
  • フレームワーク: React 18.3（Concurrent Features、Suspense対応）
  • 主要ライブラリ:
    • Plait (0.84.0): 独自開発の画図エンジン・コアフレームワーク
    • Slate (0.116.0): リッチテキストエディター統合
    • Floating UI (0.26.24): ポップアップ・ツールチップ位置制御
    • RxJS (7.8): 非同期イベント処理・リアクティブプログラミング
    • LocalForage (1.10.0): IndexedDB/WebSQLによる永続化
    • ahooks (3.8.0): React Hook ユーティリティ集

開発・運用ツール

  • ビルドツール: Vite 6.2（高速HMR、ES Module最適化）、NX 19.3（モノレポ管理）
  • テスト: Jest 29.4（単体テスト）、Vitest 3.0（統合テスト）、Playwright（E2Eテスト）
  • CI/CD: GitHub Actions（自動テスト・デプロイ）
  • デプロイ: Docker対応（pubuzhixing/drawnix:latest）、Netlifyホスティング

設計パターン・手法

  • プラグインアーキテクチャ: 機能をプラグイン単位で分離、独立性と拡張性を両立
  • HOC（高次コンポーネント）: with-* パターンによる横断的関心事の分離
  • Hook Pattern: React Hooksによる状態管理とロジック再利用
  • Observer Pattern: RxJSによるイベント駆動型アーキテクチャ
  • Strategy Pattern: 描画モード（マインドマップ・フローチャート・自由描画）の切り替え
  • Command Pattern: 操作履歴管理（Undo/Redo機能）

データフロー・処理フロー

  1. 入力処理: ポインター・キーボードイベント → PlaitBoardコア
  2. プラグイン処理: 各プラグインがイベントを順次処理・変換
  3. 状態更新: Immutableデータ構造での状態変更
  4. レンダリング: React仮想DOM → Canvas/SVG要素描画
  5. 永続化: LocalForage → IndexedDB自動保存
  6. エクスポート: JSON/PNG形式でのデータ出力

API・インターフェース

公開API

PlaitBoard コア API

  • 目的: ホワイトボードの中核機能制御
  • 使用例:
import { PlaitBoard } from '@plait/core';

// ボード初期化
const board = new PlaitBoard();

// 要素追加
board.addElement({
  type: 'mind-node',
  data: { text: '中央ノード' },
  position: [400, 300]
});

// イベントリスナー
board.on('element-selected', (element) => {
  console.log('選択された要素:', element);
});

React統合 API

  • 目的: Reactコンポーネントとしての利用
  • 使用例:
import { useBoard, useBoardEvent } from '@drawnix/react-board';

function MyBoard() {
  const [board, boardRef] = useBoard({
    plugins: [mindPlugin(), drawPlugin()]
  });
  
  useBoardEvent(board, 'change', (changes) => {
    // 変更イベント処理
  });
  
  return <div ref={boardRef} className="whiteboard" />;
}

設定・カスタマイズ

設定ファイル

// drawnix.config.ts
export interface DrawnixConfig {
  theme: 'light' | 'dark';
  autoSave: boolean;
  plugins: PlaitPlugin[];
  shortcuts: Record<string, string>;
  exportFormats: ('png' | 'jpg' | 'json')[];
}

const config: DrawnixConfig = {
  theme: 'light',
  autoSave: true,
  plugins: [mindPlugin(), drawPlugin()],
  shortcuts: {
    'Ctrl+Z': 'undo',
    'Ctrl+Y': 'redo',
    'Delete': 'deleteSelected'
  },
  exportFormats: ['png', 'json']
};

拡張・プラグイン開発

プラグイン開発インターフェース:

// カスタムプラグイン実装例
export const customPlugin = (): PlaitPlugin => {
  return {
    key: 'custom-plugin',
    initializeBoard: (board: PlaitBoard) => {
      // 初期化処理
    },
    onKeyDown: (event: KeyboardEvent) => {
      // キーイベント処理
    },
    renderElement: (element: PlaitElement) => {
      // カスタム要素描画
      return <CustomElement data={element.data} />;
    }
  };
};

パフォーマンス・スケーラビリティ

パフォーマンス特性

  • ベンチマーク結果: 1000要素規模のマインドマップで60fps維持、Canvas/SVG最適化により軽量描画
  • 最適化手法:
    • 仮想化スクロール（大量要素の部分描画）
    • Immutable データ構造による効率的な変更検知
    • React.memo、useCallback による不要な再描画防止
    • WebWorker による重い処理のバックグラウンド実行

スケーラビリティ

  • 要素数: 理論上10,000要素まで対応（実用的には1,000-2,000要素推奨）
  • 同時編集: 単一ユーザー設計（マルチユーザー対応は将来課題）
  • ファイルサイズ: JSON形式で数MB程度まで快適動作
  • メモリ使用量: 通常利用で200-500MB、大規模データで1-2GB

制限事項

  • ブラウザー依存: モダンブラウザー必須、IE非対応
  • オフライン制限: IndexedDBによるローカル保存のみ、クラウド同期なし
  • リアルタイム編集: 現バージョンでは単一ユーザーのみ対応
  • モバイル機能: 基本機能のみ、複雑操作は制限あり

評価・所感

技術的評価

強み

  • 独自フレームワーク: Plait画図エンジンによる高度なカスタマイズ性と拡張性
  • プラグインアーキテクチャ: 機能分離による保守性とスケーラビリティ
  • マルチフレームワーク対応: React/Angular両対応により導入障壁の低さ
  • TypeScript完全対応: 型安全性による開発生産性と品質向上
  • モダンツールチェーン: Vite/NX/Vitestによる高速開発環境
  • 企業バックアップ: PingCode社の技術力と継続的メンテナンス体制

改善の余地

  • リアルタイム協調: WebSocket/WebRTC活用した同時編集機能
  • クラウド統合: ファイル同期・バージョン管理・共有機能
  • AI統合: 自動レイアウト最適化、コンテンツ提案機能
  • パフォーマンス: 大規模データでの描画最適化
  • アクセシビリティ: スクリーンリーダー対応、キーボードナビゲーション

向いている用途

  • 個人思考整理: ブレインストーミング、アイデア可視化、学習ノート作成
  • 小規模チーム: プロジェクト企画、ワークフロー設計、技術設計書作成
  • 教育・研修: 概念図作成、知識体系化、プレゼンテーション準備
  • 開発・設計: システム構成図、UI/UXワイヤーフレーム、API設計
  • セルフホスト: 企業内部ツールとしてのカスタマイズ・デプロイ

向いていない用途

  • 大規模チーム協調: リアルタイム同時編集が必要な多人数プロジェクト
  • 高精度図面: CAD/建築図面など精密な技術図面作成
  • データビジュアライゼーション: 大量データの動的グラフ・チャート生成
  • プロダクション級SaaS: エンタープライズ要件（SSO、監査ログ等）

総評

Drawnixは、オープンソースホワイトボール分野で極めて完成度の高いプロダクトです。独自開発のPlaitフレームワークに基づく技術的優位性、プラグインアーキテクチャによる拡張性、企業支援による継続的開発体制が三位一体となって、持続可能な成長を実現しています。Miro/Figma等の商用サービスに匹敵する機能を無料で提供する価値は計り知れません。特に中小企業・スタートアップ・教育機関・個人開発者にとって、思考整理から設計作業まで幅広くカバーする万能ツールとしての地位を確立しています。10,133スターという支持は、オープンソース界における同分野での圧倒的な存在感を示しており、今後の機能拡張とコミュニティ成長が大いに期待されます。