1
図の画像をアップロード
スクリーンショット、書き出し画像、スキャン画像、ホワイトボード写真などを追加します。
画像をMermaidに変換
画像から編集可能なMermaidコードを作成
フローチャートのスクリーンショットや図の画像をアップロードすると、表示されている構造を確認・編集できるMermaidコードの下書きとして再構築します。
フローチャートの構造を、編集可能なMermaid記法の下書きとして再構築します。
Markdown、GitHub、Notion、README、技術ドキュメントで使う図の作成に役立ちます。
キャンバスで構造を確認してから、利用できる場合は最新のMermaidソースをコピーまたは書き出せます。
対応する入力形式
PNGJPGJPEGSVG
編集可能な変換例
図の画像を編集可能なMermaidコードに変換
フローチャートのスクリーンショットや図の画像をアップロードすると、表示されている構造をMermaid記法として再構築します。ドキュメント、GitHub、Markdownで使う前に内容を確認できます。
変換前
図の画像またはスクリーンショット
見た目だけの静的な図
変換後
Mermaidコードとプレビュー
コピー、編集、描画できるコード
MermaidコードレンダリングプレビューMarkdown対応編集可能なラベル
画像の図と編集可能な図の違い
図は画像に固定されているMermaid記法として再構築
描き直しが必要コードをドキュメントに貼り付け
ラベルは見た目のみコード上でラベルを変更
履歴を追いにくいテキスト差分で確認できる
変換の仕組み
元となるファイルを用意し、AIに見えている構造を再構築させてから、キャンバス上で編集可能な結果を確認します。
2
AIが構造を再構築
文字、図形、分岐、矢印、接続線、配置を認識して編集可能な下書きを作成します。
3
確認して書き出し
キャンバスで文字や接続線を整え、必要な形式で書き出します。
編集可能な変換結果
変換後に編集できる内容
ZUOKOSHIは見えている図を編集可能な図形として再構築するため、平面画像のままではなく、確認と調整ができる出力になります。
ラベル
図を再構築した後、表示されている文字ラベルを確認して編集できます。
図形
工程のボックス、判断ノード、そのほかの図形を移動、拡大縮小、追加、削除できます。
接続線
矢印をつなぎ直し、流れの方向や分岐を必要に応じて調整できます。
レイアウト
編集用キャンバス上で余白、整列、グループ、読み順を整えられます。
画像を図に変換する用途
もう一度編集したい図のために
入力する画像や必要な編集形式に合う変換ツールを選べます。
画像からフローチャートを作成
業務フロー、判断フロー、プロセス図を編集可能な形に変換します。
古い図を更新
元ファイルがなくても、画像に残った図を更新できる下書きとして再構築します。
会議の図をデジタル化
ホワイトボードや手書きの図を、共有・調整しやすいデジタルの図にします。
アップロード前の確認
変換後に確認すること
画像を編集可能な図に変換するとは
画像を図に変換するツールは、静的な図の画像から文字、図形、矢印、接続関係を読み取り、編集可能な図として再構築するためのツールです。
スクリーンショット、書き出し画像、スキャン画像、ホワイトボード写真しか残っていない場合でも、描き直す前の下書きとして使えます。
より正確に変換するための画像
文字、矢印、接続線が見やすく、十分なコントラストがある画像を使用してください。
変換後は、共有や書き出しの前に文字、矢印、分岐、レイアウトを確認してください。
Results and quality
Supported outputs and best results
見やすいPNG、JPG、JPEG、SVGの図の画像をアップロードしてください。文書内の図は、必要なページを画像として書き出すかキャプチャしてからアップロードします。
対応する画像形式
PNGJPGJPEGSVG
利用できる出力形式
編集可能なキャンバスdraw.ioファイルMermaidExcalidrawファイルPNGSVG
書き出せる形式は、現在のZUOKOSHIキャンバスの書き出し機能に従います。
編集可能なキャンバス
- Free
- 利用可
- Pro
- 利用可
- Notes
- 再構築した図を確認・調整するための基本ワークスペースです。
PNG
- Free
- 透かしあり
- Pro
- 透かしなし・高解像度
- Notes
- 簡単な共有、プレゼンテーション、視覚的なドキュメントに向いています。
SVG
- Free
- 制限あり
- Pro
- 利用可
- Notes
- 拡大してもきれいなドキュメントやWebサイトに向いています。
draw.ioファイル
- Free
- 制限あり
- Pro
- 利用可
- Notes
- draw.io互換の編集ワークフローで利用できます。
Mermaid
- Free
- 利用できる場合にコピー
- Pro
- 高度な書き出し
- Notes
- Markdown、GitHub、Notion、技術ドキュメントに便利です。
Excalidrawファイル
- Free
- 制限あり
- Pro
- 利用可
- Notes
- 手書き風の編集可能な図のワークフローで利用できます。
Best results checklist
- 文字が読みやすい、見やすい画像を使用してください。
- 複数の無関係な図がある場合は、1つの図または1つの工程にトリミングしてください。
- 矢印の先端、接続線、判断ラベルが見える状態にしてください。
- コントラストの高いスクリーンショット、または正面から撮影したホワイトボード写真を使用してください。
- 最終的な図を書き出す前に、ラベル、矢印、分岐方向を確認してください。
- ドキュメント用のMermaidコードが必要な場合は、文字が読みやすいフローチャートのスクリーンショットを使用してください。
Limitations and cleanup
- 密集した図は、最初のAI再構築後に手動で整える必要があります。
- ぼやけた文字、切り取られた文字、コントラストの低い文字は認識精度に影響します。
- 結果は隠れた元データを復元するものではなく、見えている構造を再構築した編集可能な図です。
- 接続方向、分岐ラベル、複雑なレイアウトは共有前に確認が必要になる場合があります。
- 密集した図、ぼやけた図、フローチャート以外の複雑な図では、Mermaid記法やラベルの調整が必要になる場合があります。
After conversion
Continue from the converted diagram without rebuilding the file.
編集用キャンバスを開く
手動で編集しながら、再構築した図をさらに整えます。
目的のファイルを書き出す
利用できる場合は、完成した図をdraw.io、Mermaid、Excalidraw、PNG、SVGとして書き出します。
下書きを確認
共有する前に、ラベル、図形、矢印、接続線を確認します。
よくある質問
アップロード前の疑問
関連する変換ツール
作業に合う変換ツールを選ぶ
図の画像をMermaidコードに変換
スクリーンショットまたは図の画像をアップロードし、ドキュメント用のMermaid下書きとして再構築します。