コードで図表を作成
フローチャート、シーケンス図、クラス図、ガント、マインドマップなどを書きながら結果を確認できます。
SourceCanvas
コードで図表を気軽に作成
フローチャート、シーケンス図、クラス図、状態図、ER 図、ガントチャート、タイムライン、マインドマップなどをコードで書き、結果を横で確認できます。SourceCanvas は図表作成、学習、保存、PNG/PDF 書き出しを軽くします。
- 書きながら確認
- 多くの図表を学べる
- Mac、iPad、iPhone、Apple Vision Pro に対応
主な機能
図表の書き方を学ぶところから文書用の図を完成させるところまで、コードで描く作業をひとつの画面で進められます。
Mermaid 図表を学習
読みやすい例を編集しながら、ノード、線、参加者、タイムライン、タスク範囲、図表構造を学べます。
幅広い図表に対応
フロー、構造、計画、知識整理、データ分析、専用図まで扱えます。
ソースを開いて保存
.svg、.mmd、.mermaid ファイルを開き、図表ソースをプロジェクトや文書に保存できます。
ズーム、背景、書き出し
ピンチズームと背景切替で細部を確認し、PNG 1x、PNG 2x、PNG 3x、PDF に書き出せます。
SourceCanvas の使い方
図表の書き方を学ぶところからドキュメント用の図を仕上げるところまで、作成、プレビュー、保存、書き出しを一つの流れで進められます。
例から学ぶ
フローチャート、シーケンス図、ガントチャート、マインドマップなどから始め、ソースを編集しながら構造を理解できます。
書きながら結果を見る
ソースとプレビューを並べて表示し、ノード、線、期間、グループの変更をすぐ確認できます。
複数のデバイスで作図
Mac ではキーボード入力、iPad と iPhone ではタッチ確認、Apple Vision Pro では大きな図表確認に向いています。
ソース保存と画像書き出し
.mmd、.mermaid、.svg のソースを保存し、PNG 1x、PNG 2x、PNG 3x、PDF として書き出せます。
作成できる Mermaid 図表
SourceCanvas は読みやすいコードを図表に変えることに集中しています。よく使う図表名から始め、文書に合わせて少しずつ学べます。
フローと構造
- フローチャート / グラフ
- シーケンス図
- クラス図
- 状態図
- ER 図
- 要求図
- C4 アーキテクチャ図
計画と知識
- ガントチャート
- Git グラフ
- ユーザージャーニー
- タイムライン
- マインドマップ
- カンバン
- アーキテクチャ図
- イベントモデリング図
データと分析
- 円グラフ
- 象限図
- XY チャート
- サンキー図
- レーダーチャート
- ツリーマップ
- Info 図
専用図
- パケット図
- ブロック図
- ツリービュー
- 魚骨図
- ベン図
- Wardley マップ
新しい図表スタイルは今後変化する場合があります。まずはフローチャート、シーケンス図、ガント、マインドマップから始めるのがおすすめです。
コードで図表を作るチュートリアル
図表コードを書く、モードを選ぶ、結果を確認する、保存または書き出す、という 4 ステップで進めます。
図表コードを書く、またはファイルを開く
フローチャート、シーケンス図、ガント、マインドマップなどの図表コードをエディタに書きます。.svg、.mmd、.mermaid ファイルも直接開けます。
- Mermaid 図表を例から学ぶのに向いています。
- 文書プロジェクト内のフローやアーキテクチャ図を保守できます。
- macOS はドラッグ＆ドロップに対応し、iOS / iPadOS / visionOS ではシステムのファイル入口を使います。
Auto / SVG / Mermaid モードを使う
Auto は内容と拡張子から種類を判定します。混在した断片や強制的に描画したい場合は、SVG または Mermaid に手動で切り替えます。
- Auto はほとんどの貼り付けとファイル読み込みに適しています。
- SVG は SVG 描画経路に固定します。
- Mermaid は図表レンダラーを使い、背景オプションを表示します。
ソースと結果を同じ画面で確認
プレビュー領域には描画状態が表示されます。拡大縮小で細部を確認でき、iPhone と iPad では 2 本指ピンチでも操作できます。
- ズームボタンまたはタッチジェスチャで細線、ノード、文字を確認します。
- Mermaid は紙背景が標準で、透明、白、ミスト、ダークにも切り替えられます。
- 無効な入力には明確なフィードバックが出るため、すばやく修正できます。
ソースを保存、またはプレビューを書き出す
図形が正しいことを確認したら、ソースを対応形式で保存するか、プレビューを PNG 1x、PNG 2x、PNG 3x、PDF として書き出します。
- SVG ソースは .svg として保存します。
- Mermaid ソースは .mmd または .mermaid として保存します。
- iOS では保存と書き出しにシステムのファイルパネルを使い、現在の図形と背景設定が反映されます。
対応プラットフォーム
同じプレビュー手順がデスクトップ、タッチ画面、空間コンピューティングに適応し、画面サイズに合わせてレイアウトが変わります。
Mac：キーボード中心のワイド作業画面
横長画面ではソースとプレビューを並べ、開発、文書、デザインツールの間で素早く確認できます。
iPad：ソースとプレビューを並べる作業画面
左側のツール列をなくし、上部コマンドと並列の編集／プレビューで横向きの SVG アイコンと Mermaid 図表を確認しやすくします。
iPhone：3 行ツールバーとピンチズーム
狭い画面ではソースとプレビューを上下に並べ、開く／保存のアイコン、モード、背景、ズームを操作しやすく保ちます。
Apple Vision Pro：空間ウインドウで大きく確認
図表と文書を広い作業空間に置けるため、複雑な Mermaid 図表の確認に向いています。
コード作図と図表学習に最適
SourceCanvas は図表編集、Mermaid 図表学習、フローチャート作成、文書図、ソース保存、PNG/PDF 書き出しに集中しています。
図表エディタ
フローチャート、シーケンス図、クラス図、ガント、マインドマップ、タイムラインをコードで書き、結果を確認できます。
Mermaid 図表学習
読みやすい例から、ノード、線、分岐、参加者、タスク範囲、図表構造を学べます。
ドキュメント作成
製品フロー、システム設計、プロジェクト計画、知識構造を保守しやすい図表ソースにできます。
SVG と視覚素材
SVG マークアップ、アイコン、イラスト、ベクター確認も同じ作業画面で扱えます。
PNG/PDF 書き出し
完成した図表を PNG 1x、2x、3x、PDF として文書、レビュー、教材、アーカイブに使えます。
FAQ
SVG、Mermaid、ファイル形式、プライバシー、書き出しに関する短い回答です。
SourceCanvas は無料ですか？
このサイトは軽量なローカルプレビューツールの機能を紹介しています。実際の価格と提供状況は App Store ページで確認してください。
SourceCanvas はファイルをアップロードしますか？
アプリはローカルプレビューツールとして設計され、主要な SVG / Mermaid 描画はリモート描画サービスに依存しません。最終的なプライバシー文面は公開版とプライバシーポリシーで確認してください。
対応しているファイル形式は？
SVG、Mermaid ソース、Markdown Mermaid コードブロックの貼り付けに対応し、.svg、.mmd、.mermaid ファイルを開けます。
Mermaid の背景を切り替えられる理由は？
文書やデザインの場面ごとに背景色が異なります。透明、白、紙、ミスト、ダーク背景でコントラストや境界の問題を早く見つけられます。
PNG と PDF の書き出しは何に使えますか？
PNG は文書、チケット、チャットに貼り付けやすく、PDF はアーカイブ、レビュー、ベクター文書のワークフローに向いています。
iOS の保存と書き出しはどう変わりましたか？
ソース保存はシステムのファイルパネルを開きます。書き出しは PNG 1x、PNG 2x、PNG 3x、PDF と表示され、倍率が分かりやすくなりました。
チーム利用に向いていますか？
ローカル素材や図表をすばやく確認したいチームに向いています。特にフロントエンド開発、デザイン QA、製品文書、技術文書に適しています。