エディター概要
SpecDownのエディターはMonacoを採用 — VS Codeと同じエンジン — ブラウザでプロフェッショナルな執筆体験を提供します。
エディターレイアウト
エディターは3つのメインパネルに分かれています：
- ファイルツリー（左）— プロジェクトのドキュメントとフォルダをナビゲート
- エディターペイン（中央）— フルシンタックスハイライトでMarkdownを記述
- プレビューペイン（右）— リアルタイムレンダリング、入力に合わせて更新
上部ツールバーでパネルの表示/非表示を切り替えられます。小さい画面ではエディターとプレビューは縦に積み重なります。
キーボードショートカット
| 操作 | Mac | Windows / Linux |
|---|---|---|
| ドキュメント保存 | ⌘ S | Ctrl + S |
| 太字 | ⌘ B | Ctrl + B |
| 斜体 | ⌘ I | Ctrl + I |
| ファイル内検索 | ⌘ F | Ctrl + F |
| コマンドパレット | ⌘ Shift P | Ctrl + Shift + P |
| コメント切替 | ⌘ / | Ctrl + / |
| 行をインデント | Tab | Tab |
| 行をアウトデント | Shift Tab | Shift + Tab |
| 行を複製 | ⌘ Shift D | Ctrl + Shift + D |
| 行を上下に移動 | ⌥ ↑/↓ | Alt + ↑/↓ |
ツールバー操作
分割表示
エディター / プレビュー / 分割レイアウトを切替
プレビューモード
フルスクリーンでレンダリングされたプレビュー
画像挿入
Cloudflare R2 CDNへ画像アップロード
バージョン履歴
過去バージョンの閲覧と復元（Pro）
被リンク
現在のドキュメントへリンクしている文書を確認
ドキュメントグラフ
現在のドキュメント周辺の入出力リンクを確認
ドキュメント共有
公開またはパスワード保護の共有リンク作成
キーボードショートカット
全ショートカット参照を表示
Markdownサポート
SpecDownは完全なCommonMark仕様に加え、以下の拡張をサポート：
- GitHub Flavored Markdown（テーブル、取り消し線、タスクリスト）
- Mermaid図ブロック（Mermaid Diagramsを参照）
- フェンスコードブロックで150以上の言語のシンタックスハイライト
- 脚注
- 数式ブロック（KaTeX経由のLaTeX）
- [ ] や - [x] で始まる行は、 プレビュー側でスタイル付きチェックボックスとしてレンダリングされます。チェックボックスをクリックすると Markdown 内のマーカーが切り替わって自動保存されるため、ビューモードのままタスクを消化できます。 共有ページ（読み取り専用）では同じスタイルのチェックボックスが表示されますが、操作はできません。[ ] や [x]（例：「Session timeout (BR2) [ ]」）もインタラクティブな チェックボックスとしてレンダリングされ、スペック行の Pass/Fail フラグなどに便利です。除外: フェンス付きコードブロック内、[x](url) のリンク／参照構文、リスト項目先頭の GFM マーカー。<input value="..." /> や <textarea>...</textarea> を書くと、プレビューでは実際の入力欄として表示されます。 入力した値はそのまま Markdown ソースに書き戻されるので、エディタモードに戻ったあともバージョン履歴にも 値が残ります。ドキュメント間のリンク
Markdown のリンクは同じプロジェクト内の別ドキュメントを指すことができ、クリックすると共有トークンを 失うことなくその場でターゲットを開きます — 完全再読み込みは発生しません。
認識される構文は 3 つです:
- 絶対パス:
[画面一覧](/srs/screen-list)または拡張子付き(/srs/screen-list.md)。 - 相対パス:
[Spec 001](./SPEC-001)や(../guides/oauth)。 - Wiki リンク:
[[/srs/SPEC-001]]または表示テキスト付き[[/srs/SPEC-001|Spec 001]]。
- 存在するドキュメントへのリンクは通常のリンクとして表示され、クリックでエディタ(またはプロジェクト共有のセッション)内のドキュメントが切り替わります。
- 該当ドキュメントが存在しないパスへのリンクは 赤い点線 で表示され、レビュー時に壊れた参照を発見できます。
- 外部 URL(
https://…)、アンカー(#section)、添付埋め込み([@/path])は変更されません。
HTML ドキュメント
SpecDown は Markdown 専用ではありません — .md と並べて .html ファイルも保存できます。作成するには 新規ファイル フォームで タイプ切替を MD から HTML に変更します(またはファイル名末尾に .html を付けます)。
- Monaco は自動的に HTML 構文ハイライトに切り替わります。
- プレビューは サンドボックス iframe 内でレンダリングされます — スクリプト・スタイル・フォームはホストアプリから完全に隔離されます。
- HTML ファイルはファイルツリー内でコードアイコン(琥珀色)で表示され、視認しやすくなります。
- リネームは Markdown と同様に動作し、
.html拡張子は自動的に保持されます。
body { height: 100vh; overflow: hidden } を使う場合(インタラクティブなダイアグラム、ダッシュボード、シングルページモックなどでよく見られます)、プレビューは body.scrollHeight に追従して伸ばすのではなく、ビューポート相対の固定高さにロックします。これにより ユーザーがアプリ内をクリックするたびに iframe の高さが暴走する問題を回避できます — 内部スクロールやクリックハンドラは 通常通り動作します。.html ドキュメント(または既存の.html 添付ファイル)を共有すると、共有 URL はあなたの HTML をページ全体として配信します — SpecDown ヘッダーなし、周囲のクロームなし、iframe なし。ブラウザはそのまま HTML 内に遷移します。パスワード保護された 共有では先にパスワードゲートが表示され、認証後に同じ方法で生 HTML が配信されます。HTML 内のスクリプトは サンドボックス origin で実行されるため、SpecDown の Cookie を読んだり閲覧者のセッションで API を呼んだりはできません。画像アップロード
ツールバーの画像アイコンをクリックするか、エディターに直接画像を貼り付け。 画像はCloudflare R2にアップロードされ、CDN URLのMarkdown画像タグとして挿入されます。
プロジェクト添付ファイル
ファイルツリーには Markdown 以外のファイルも配置できます。PDF、画像、動画、CSV、 そして .json、.txt、.js、.tsx、.py などのテキスト/コード系ファイルを project attachment として追加できます。
- Markdown は従来どおりフルエディターで開きます
- 添付ファイルはプレビュー専用タブで開きます
- 画像、PDF、動画はそれぞれの viewer で表示されます
- CSV はテーブル表示されます
- テキスト/コード系ファイルは code/text block として表示されます
.md と PDF / 画像 / その他バイナリが混じったフォルダをアップロードすると、それらは ツリー上の 同じ 1 つのフォルダ に収まります — 以前のように同名のフォルダが ドキュメント用と添付用に分かれて並ぶことはなくなりました。<img src="./flow.png" /> で参照しても、パスを書き換えることなく解決されます。<img src="./flow.webp" /> で参照したり、隣のフォルダへ  で移動したり、project の絶対パス (/shared/diagram.svg) を使うことができます。プレビューは src を 対応する添付の署名付きダウンロード URL に書き換えます — 編集時と share ビューの双方で動作します。<img src="./…"> 参照は引き続き解決されます。ドラッグ中はカーソルが上端 / 下端に近づくとファイルツリーが 自動でスクロールするので、長いリストの画面外のフォルダにも届きます。.xlsx / .xls / .xlsm 添付はクライアントサイドで パースされ、シートごとにタブで表示されます。大きなブックでも UI が固まらないよう 行 / 列に上限を設けています。ZIP アーカイブは通常通りアップロードされ、 ダウンロード専用のカードが表示されます。report.pdf、diagram.webp) を表示するようになり、PDF・画像・ その他バイナリを一目で見分けられます。.html 添付ファイルを エディタで開くと、右上に ドキュメントとして編集 ボタンが表示されます。クリックすると同じ内容で 編集可能な HTML ドキュメントが新しいタブに作成されます — HTML アップロードが標準で編集可能になる前の 添付ファイルを移行したい場合に便利です。元の添付ファイルはそのまま残るので既存の共有リンクは壊れません。 不要になったら手動で削除してください。添付ファイルのインライン埋め込み
Markdown 内では [@/path/to/file] という構文で project attachment を参照できます。 preview モードではその path を解決し、ファイル内容をインライン表示します。
[@/assets/architecture.pdf]
[@/media/demo.mp4]
[@/snippets/example.tsx]
[@/data/sample.csv]path が見つからない場合は、preview に warning block が表示されるため、壊れた参照をすぐに発見できます。
自動保存
エディターは入力を止めてから2秒ごとに自動保存します。 ツールバーに「Saved」表示が現れます。手動保存（⌘S）でコンテンツ変更があれば即時保存とバージョンスナップショットを作成します。
バージョン履歴
履歴アイコンをクリックしてバージョン履歴パネルを開きます。各バージョンには以下が表示されます：
- 保存したユーザー
- 保存のタイムスタンプ
- 前バージョンとのサイズ差
- そのバージョンへロールバックする復元ボタン
任意のバージョンのプレビューアイコンをクリックすると、フル内容の差分モーダルが開きます。 モーダルは直前のバージョンと比較し、追加された行を緑、削除された行を赤でハイライトします。 最初のバージョンでは全内容が追加扱いで表示されます。
バージョン履歴サイドバーはサイズ変更可能です — 左端をドラッグして幅を調整できます。 設定した幅はセッションを超えて保持されます。
他のユーザーと同時編集
ユーザーは少なくとも 1 文字入力した後にのみ「編集中」として扱われます。閲覧のみの ユーザー（ドキュメントを開いただけで入力していない人）は警告をトリガーしません — プレゼンスアバターには表示されますが、鉛筆バッジは付きません。
実際に編集中のユーザーがいる（アバターに鉛筆バッジ）ドキュメントを開くと、 SpecDown は警告モーダルを表示します。3 つの選択肢：
- 編集を続行 — 通常通り開く。編集中のユーザーには、あなたが強制編集したことを示す警告トーストが表示されます。
- 閲覧のみ — 「閲覧のみ」バッジ付きで読み取り専用として開く。最後の編集者が離れると、最新内容が自動で再読み込みされ編集可能になります。
- 編集を依頼 — 編集中のユーザーへ依頼を送信。許可 / 拒否 のトーストが表示されます。許可されれば即座に編集権限が得られます。拒否または 30 秒応答なしの場合、モーダルが 3 ボタン表示に戻り再選択できます。
依頼を受けた側のトーストは 60 秒間保持されます。複数の編集者が依頼を受けることが あります — 最初に許可した人が勝ちです。
被リンク
エディターヘッダーの backlinks アイコンをクリックすると、現在のファイルへリンクしている ドキュメント一覧を表示できます。ADR の再構成や重要なドキュメントの AI rewrite 前に、 依存関係を素早く把握するのに役立ちます。
- 各項目にドキュメント名とフルパスを表示します
- 項目をクリックすると、そのドキュメントをエディターで直接開けます
- review status と合わせて、変更の影響範囲を判断できます
プロジェクトグラフ
ドキュメントを開き、エディターツールバーのグラフアイコン（ノードネットワーク 状のアイコン）をクリックすると、プロジェクト内のすべてのドキュメントが力学レイアウトの グラフとして表示されます。各ノードはドキュメント、各エッジは2つのドキュメント間の内部 マークダウンリンクまたはwikilinkです。
- ノードをクリックするとそのドキュメントに移動します。
- ノードにホバーすると隣接ノードが強調表示され、それ以外は暗くなります。
- 検索ボックスに入力してフィルターできます（タイトルに一致）。
- 孤立ノードのみは、リンクの入出がないドキュメントを表示します。
- 全画面でダイアログを画面いっぱいに広げて大きなグラフを表示できます。
ノードは最上位フォルダで色分けされ、クラスタが視覚的に分かりやすくなります。 ルート直下のドキュメントは1つのグループにまとめられます。