Markdown と Mermaid

English

ForgeKairos は、Markdown の入力補助、幅の広いプレビューと HTML の対応、画像と文字色の補助、PDF の書き出し、 Mermaid の図の構造化エディターを足す。Zed の Markdown の対応は Zed の Markdown の文書 を見る。

入力補助

  • Enter で引用、箇条書き、番号付きリスト、タスクリストを続ける。Tab でリストの項目を字下げする。
  • Markdown では、Enter の前に強制改行の行末のスペース 2 つを足す (hard_break_on_newline、Markdown では オン)。Shift+Enter は 1 回だけ逆の動きをする。
  • 整形のアクション: 引用、太字、斜体、取り消し線、インラインコード、見出し 1〜3、箇条書き、番号付き リスト、タスクリスト、リンク、水平線、コードブロック。ctrl-b、ctrl-i、ctrl-shift-x (macOS は cmd) は、Markdown のファイルでだけ太字・斜体・取り消し線になる。
  • Markdown のファイルを開いている間、ツールバーの下に整形のバーを出す (toolbar.markdown_format_bar)。 <details>、画像、Mermaid の図の挿入と、文字色・マーカー・段落の文字サイズもここから行う。
  • 見出し、コードブロック、<details> はガターから折り畳め、ある段の見出しをまとめて折り畳める。

プレビュー

  • 目のボタンは同じペインにプレビューを開く。Ctrl+クリック (macOS は Cmd+クリック) でエディターの横に開く。
  • プレビューはペインの幅いっぱいを使う (markdown_preview.limit_content_width はオフ)。
  • 1 つの改行を改行として表示する (markdown_preview.soft_break_as_hard_break)。
  • 表の列に最小の幅を持たせ、列が収まらないときだけ横にスクロールする。
  • 対応する HTML: <details> と <summary> (クリックで開閉)、<br>、<div align>、<center>、<b>、 <kbd>、<u>、<s>、<hr>、<sub>、<sup>、<a href>。javascript:、data:、vbscript: の リンクは開かない。

画像

markdown: insert image (整形のバーにもある) は、パス、代替テキスト、配置、大きさのダイアログを開く。指定に応じて ![alt](path)、 幅と高さ付きの <img>、画像を囲む <div align> のどれかを書く。パスは Markdown のファイルからの相対で、 プロジェクトの外の画像は images フォルダーにコピーする。SSH と WSL のリモートでも使える。

  • 保存済みの Markdown に画像を貼り付けると、images/image-YYYYMMDD-HHMMSS.<ext> に保存してリンクを書く。
  • OS からファイルをドロップするとコピーし、プロジェクトパネルからドロップするとリンクを書く。
  • ](、![](、src="、href=" の後ではパスを補完する。

表

markdown: edit table は、カーソルの下のパイプの表 (無ければ空の表) をセルの格子で開く。行と列の挿入・ 削除・移動、列ごとの配置の指定、表計算ソフトからコピーした範囲の貼り付け (表に広げる) ができる。 更新 で Markdown の表として書き戻す。

文字色、マーカー、文字サイズ

  • 文字色は <span style="color: …"> を書く (8 色)。
  • マーカーは <mark> (黄) か <mark style="background-color: …"> を書く。
  • 段落の文字サイズは段落を <span style="font-size: …"> で囲む。

マークアップを壊す位置 (タグ・コメント・コードの中、リンクや表のセルをまたぐ範囲) では、知らせを出して 何もしない。GitHub は style 属性を捨てるので、そこでは色と大きさは出ない。

PDF の書き出し

markdown: export to pdf (ツールバー、プレビュー、タブの右クリックのメニューから) は、保存済みの Markdown の 隣に同じ名前の PDF を書く。Microsoft Edge のヘッドレスモードを使い、Edge が見つからなければ PATH の pandoc を使う。ページは A4 で、Mermaid の図を含み、文字色を保つ。

Mermaid

Mermaid の図は ForgeKairos 自身が描く (JavaScript を使わない)。Markdown のプレビューとエージェントパネルで 表示する。

  • Mermaid 図を挿入 (整形のバー、右クリックのメニュー、mermaid-* のスニペット) で、選んだ種類の図を 挿入する。
  • Mermaid 図を編集… (右クリック、プレビューの図の 編集 ボタン、整形のバー) で、カーソルの位置か 近くの図の構造化エディターを、ファイルと並ぶタブとして開く。左が入力欄、右が大きなプレビューで、境目は ドラッグで動かせる (幅の狭いペインでは上下に並ぶ)。プレビューは図をペインいっぱいに拡大・縮小して 見せるほか、拡大・縮小のボタンや Ctrl+スクロールで選んだ倍率でも見られる (ペインより大きいとスクロール)。同じ図をもう一度開くと、そのタブが前に出る。反映 (Ctrl+Enter、またはタブの 保存) で 1 回の取り消し単位で書き戻し、タブは開いたまま残る。未反映の変更があるとタブに印が付き、 閉じるときにどうするかを聞く。タブに変更がないあいだに文書の側で図が変わると、タブはそれに合わせる。 変更があるときは警告を出し、上書きを選ばない限り書き込まない。エディターが理解しない行はそのまま残す。 再現できない構文があるときは、理由を示して開かない。このタブは再起動では戻らない。
  • プレビューでは、フローチャート、ER 図、状態図、クラス図、シーケンス図、円グラフ、ガントチャートの ラベルをダブルクリックで編集できる。
  • 描画に失敗する図は、ForgeKairos を止めず、その場所にエラーを出す。

構造化エディターは 26 種類の図に対応する: フローチャート、シーケンス図、クラス図、状態図、ER 図、 ガントチャート、円グラフ、GitGraph、マインドマップ、タイムライン、ユーザージャーニー、象限チャート、 XY チャート、レーダー、要求図、C4、ブロック図、Sankey、パケット図、ベン図、カンバン、ツリーマップ、 アーキテクチャ図、ツリービュー、石川図 (特性要因図)、イベントモデリング。