Draw.io Live Editor — LLMで強化された図表エディタ

Web

概要

Draw.io Live Editorは、技術ドキュメント向けに特化したAI(LLM)搭載のオンライン図表エディタです。ローカルでデプロイして使えるよう設計されており、Draw.io(diagrams.net)をベースに、図の自動生成・補完やテキストから図への変換、テンプレート提供など、ドキュメント作成時の図表作成を効率化する機能を備えています。Svelteを用いた軽量で応答性の高いUI、Dockerfileや.env.exampleなど開発・運用を容易にするファイル群が含まれており、技術者や技術ライターが自分の環境で安全にAI機能を試せる点が魅力です。

GitHub

リポジトリの統計情報

  • スター数: 14
  • フォーク数: 4
  • ウォッチャー数: 14
  • コミット数: 21
  • ファイル数: 27
  • メインの言語: Svelte

主な特徴

  • LLM(大規模言語モデル)を活用した図表の自動生成・提案機能
  • Draw.io(diagrams.net)互換のエディタ体験を提供するフロントエンド(Svelte)
  • ローカルデプロイ対応:Dockerfile、.env.exampleを備え、環境内で安全に実行可能
  • 開発者フレンドリーな構成(.vscode 設定、READMEによる導入手順)

技術的なポイント

このプロジェクトはフロントエンドにSvelteを採用しており、軽量で反応の良いUIを実現しています。Draw.ioの描画エンジンやXMLベースの図表データと連携することで、既存のDraw.ioワークフローへの適合を狙っている点が重要です。LLMの導入部分はコアの差別化要素で、ユーザーが自然言語で要件を入力すると、モデルが図の構造や配置、ラベルを提案・生成するワークフローを想定できます。.env.exampleが用意されていることから、APIキーやモデルエンドポイントを環境変数で差し替える設計になっており、外部の商用/オープンなLLMと接続して利用することが可能です。Dockerfileによりコンテナ化された実行環境を簡単に用意でき、オンプレミスでの安全運用やCI/CDへの組み込みが容易です。プロジェクトは小規模ながら、テンプレート管理や編集履歴、エクスポート機能など、ドキュメント作成に必要な基本機能を想定した設計がなされており、拡張ポイント(プラグインやバックエンドのカスタマイズ)を残しているため、研究・プロトタイプ用途に適しています。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .env.example: file
  • .gitignore: file
  • .vscode: dir
  • Dockerfile: file
  • README.md: file

…他 22 ファイル

まとめ

技術ドキュメント用にLLMを統合した図表作成の試作に最適なリポジトリ。

リポジトリ情報:

READMEの抜粋:

Draw.io Live Editor

An AI-powered online diagram editor based on Draw.io, designed specifically for technical documentation.

Introduction

Draw.io Live Editor is a locally deployable diagram editing tool designed to help developers and technical writers quickly and conveniently create various types of diagrams.

Design Philosophy

When writing technical documentation, we often need to create architecture diagrams, flowcharts, sequence diagrams, and other types of diagrams. However, du…