Drawnixは強力なオープンソースのオンラインホワイトボードツールで、マインドマップ、フローチャート、手描き機能を無限のキャンバス上に統合し、ユーザーに自由な創造を提供します。Drawnixはプラグインアーキテクチャに基づいて開発されているため、拡張性が高く、さまざまなフロントエンドフレームワークやリッチテキストエディタをサポートすることができます。 このツールはブラウザのキャッシュにデータを保存するオートセーブをサポートしており、データの損失を効果的に防ぎます。さらに、複数のフォーマットへのコンテンツのエクスポートをサポートし、デスクトップとモバイルデバイスの両方で一貫して優れたエクスペリエンスを提供します。コードを使って図を生成することに慣れているユーザーのために、DrawnixはMermaid構文やMarkdownテキストを使ったフローチャートやマインドマップへの直接変換もサポートしています。

機能一覧
- フリー・オープンソースユーザーはすべての機能を無料で利用できるほか、ニーズに応じた二次開発やプライベートデプロイメントも可能です。
- 多機能統合マインドマップ、フローチャート、手描き、図形描画、線描画、テキストツールをサポートし、多様な描画ニーズに対応。
- プラグイン・アーキテクチャこのフレームワークは、様々なUIフレームワーク(AngularやReactなど)やリッチテキストフレームワークとの統合をサポートしています。
- アンリミテッド・キャンバス無限の創造空間を提供し、ユーザーは自由にキャンバスを拡大したり、スクロールしたりすることができます。
- オートセーブ不測の事態によるデータ損失を避けるため、プロット内容は自動的にブラウザのキャッシュに保存されます。
- 複数のエクスポート形式PNG、JPGなどの画像形式への書き出しに対応。
.drawnixJSONファイルの - テーマ・モードデフォルトモード、カラフルモード、ソフトモード、レトロモード、ダークナイトモード、スターリーナイトモードなど、さまざまなテーマが内蔵されており、ユーザーの好みに合わせて切り替えることができます。
- クロスプラットフォームでの使用レスポンシブデザインは、デスクトップとモバイルデバイスの両方で優れた操作性を保証します。
- コード生成チャート: Mermaid構文を使用したコードブロックからフローチャートへの変換と、Markdownテキストからマインドマップへの変換をサポート (新しいサポート🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥)。
- 豊富な編集機能アンドゥ、リドゥ、コピー、ペーストなどの基本的な編集機能を提供。
ヘルプの使用
Drawnixは "すぐに使える "ように設計されており、ユーザーはソフトウェアのダウンロードやインストールをすることなく、公式ウェブサイト(https://drawnix.com)に直接アクセスして使い始めることができる。
現地でのインストールと展開
二次開発やプライベートデプロイをご希望の方は、以下の手順でローカル環境にDrawnixをインストールしてください。
環境要件。
作業を始める前に、お使いのコンピュータにNode.js.
インストールの手順
- ソースコードのダウンロード:
DrawnixのGitHubリポジトリページ(https://github.com/plait-board/drawnix)にアクセスし、ページ上の "Code "ボタンをクリックし、"Download ZIP"を選択し、プロジェクトのソースコードをローカルにダウンロードしてください。 - ファイルを解凍する:
ダウンロードしたZIPファイルを任意のフォルダに解凍します。 - 依存関係のインストール:
コマンドラインツール(ターミナルやCMDなど)を開き、解凍したプロジェクトのルートディレクトリに移動します。以下のコマンドを実行して、プロジェクトに必要な依存パッケージをインストールします:
npm install
このプロセスは、必要な依存関係をすべてダウンロードしてインストールするため、時間がかかるかもしれない。
- プロジェクトの開始:
依存関係のインストールが完了したら、コマンドラインから以下のコマンドを実行してDrawnixアプリケーションを起動します:
npm run start
コマンドが正常に実行されると、アプリケーションの起動に成功したことがコマンドラインに表示されます。http://localhost:4200(または指定された他のポート)。
- アプリケーションへのアクセス:
ブラウザを開き、上記のアドレスを入力すると、ローカル環境でDrawnixの全機能を使い始めることができます。
コア機能操作ガイド
1.シンキング・マップ
- ノードの作成キャンバス上の何もない場所でマウスをダブルクリックすると、ルート・ノードが作成されます。
- 子ノードの追加ノードを選択すると、ノードの周囲に「+」アイコンが表示されます。これをクリックすると、ノードの下に子ノードが作成されます。
- テキストの編集任意のノードをダブルクリックするとテキスト編集モードになり、ノードのテキスト内容を変更することができます。
- ドラッグアンドドロップマウスの左ボタンを押したままノードをドラッグすると、マインドマップ内の位置が変わります。他のノードにドラッグすると親子関係が変わります。
2.フローチャート
- グラフィックの作成左のツールバーからフローチャートの形状(矩形、菱形、円形など)を選択し、キャンバス上にドラッグ&ドロップして描画します。
- 接続線グラフを選択し、マウスカーソルをグラフの端に合わせると、接続点が表示されます。マウスの左ボタンを押したまま、あるグラフの接続点から別のグラフの接続点までドラッグすると、接続線が作成されます。
- 矢印の追加図形の端から線をドラッグすると、流れの方向を示す矢印を作ることができる。
3.フリーハンドのドローイングとシェイプツール
- ペイントブラシツール左のツールバーのブラシツールを選択すると、キャンバスに直接フリーハンドで描画でき、スケッチや簡単なラベリングに適しています。
- シェイプツールツールバーには、長方形、円、三角形などの基本的な図形が用意されており、それらを選択してキャンバス上に直接描くことができます。
- 写真挿入ツールバーのPictureアイコンをクリックすると、ローカルの画像をアップロードしてキャンバスの好きな場所に挿入することができます。
4.MermaidとMarkdown構文のサポート
- マークダウンからマインドマップへツールバーのMarkdownツールを選択し、書き込まれたMarkdownテキストを貼り付けると、Drawnixが自動的に構造化されたマインドマップに変換します。
- マーメイドからフローチャートへ同様に、Mermaidツールを選択し、Mermaid構文のコードを貼り付ければ、対応するフローチャートを素早く生成することができる。
5.キャンバスの操作
- パニングマウスの中ボタンを押したままにするか、スペースバーを押しながらマウスの左ボタンを押すと、キャンバスをドラッグしてパンすることができます。
- ズームマウスホイールでキャンバスを簡単に拡大・縮小して、無限にキャンバスを移動できます。
アプリケーションシナリオ
- チームワークとブレインストーミング
チームミーティングでは、メンバーがDrawnixを使って無限のキャンバス上で一緒にブレインストーミングを行い、リアルタイムでアイデアを記録し、マインドマップを描き、ディスカッションの結果をフローチャートに整理することで、コラボレーション効率を大幅に向上させることができます。 - プロジェクトの計画と管理
プロジェクトマネージャーはDrawnixを使ってプロジェクトのフローチャートやタスク分解構造(WBS)のマインドマップを作成し、プロジェクトの様々なフェーズ間の関連性や依存関係を明確に示すことで、チームメンバーが理解しやすく、実行しやすくすることができます。 - 学習と知識組織
学生や研究者はDrawnixを使って授業のノートを整理したり、自分の知識体系をマインドマップでまとめたり、抽象的な知識を視覚的に理解できるように複雑な科学フローチャートを描いたりすることができます。 - ソフトウェア設計とアーキテクチャ
ソフトウェア開発者やアーキテクトはDrawnixを使ってシステムアーキテクチャ図、UML図、データフロー図を描くことで、ソフトウェアの設計やモジュール間の相互作用ロジックをより理解することができます。
品質保証
- Drawnixは完全に無料ですか?
はい、Drawnixは完全にフリーでオープンソースのツールです。すべての機能を無料で使うことができ、2度開発することも、個人で配布することも自由です。 - 私のデータは安全ですか?
Drawnixはデフォルトでブラウザのローカルキャッシュに描画データを自動的に保存します。つまり、データはあなたのデバイスに保存され、クラウドサーバーにアップロードされることはなく、プライベートが保たれます。 - Drawnixはどのエクスポート形式をサポートしていますか?
現在、キャンバスの内容は、PNG、JPGなどの一般的な画像フォーマットや、次のような形式でエクスポートできます。.drawnix形式のJSONファイルを簡単にインポートし、編集することができます。 - 利用するにはアカウント登録が必要ですか?
Drawnixは "箱から出してすぐに "使えるように設計されているので、公式ウェブサイトを開くだけで、登録やログイン手続きなしですぐに制作を始めることができます。






























