実画面ギャラリー

実画面と PNG エクスポート を掲載しています。

モックではなく実画面です。

このページの画像は、実行中の KatanA 画面と、アプリ自身が出力した PNG です。

01

実画面

02

エクスポート PNG あり

03

dark テーマ の実 UI

screens

主要な利用シーン

通常利用で見える navigation、split reading、ダイアグラム-heavy document の流れを実画面で確認できます。

Workspace

Workspace tree と README プレビュー

ファイルツリーからドキュメントを辿り、dark テーマ の既定 UI で Markdown を読めます。

Split

ソースと描画結果を並べる split view

Markdown source と rendered output を同時に見ながら、top bar で scroll sync を扱えます。

Diagrams

ダイアグラム中心の プレビュー

Mermaid や PlantUML を含む長いドキュメントも通常の プレビュー 導線で扱えます。

Navigation

長文向け table of contents

長いドキュメントでも table of contents を使って盲目的なスクロールに頼らず移動できます。

system

System と release まわりの画面

KatanA は単なる プレビュー pane ではなく、release、update、テーマ settings まで含む desktop surface を持っています。

Releases

アプリ内 ChangeLog view

最近の release context をアプリ内で追えるため、挙動変化を把握しやすくなっています。

Updates

ネイティブな update check

repository README にある auto-updater の導線と整合する update check UI です。

Settings

テーマ / appearance settings

テーマ preset と プレビュー を備えた settings 画面があり、既に desktop app としての深さがあります。

exports

Export された PNG

CHANGELOG では Markdown エクスポート として HTML / PDF / PNG / JPG が記録されています。以下は KatanA 自身が出力した PNG です。

Export menu

UI 上で エクスポート 先を選べる

share の一部として曖昧に隠すのではなく、エクスポート target を明示的に選べます。

Markdown エクスポート

長い Markdown を PNG で出力

rendered Markdown を long PNG として書き出し、共有用途に回せます。

Diagram エクスポート

ダイアグラム-heavy document も PNG 化

単純なテキストだけでなく、ダイアグラム を多く含む文書も エクスポート 対象にできます。