0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vibe writing のための Markdown ビューアを MCP で作ってみた

0
Last updated at Posted at 2026-02-28

はじめに

更新履歴

  • 2026.4: npm パッケージ markdown-pointer を公開。PowerShell なしで MCP サーバーをセットアップ可能に

AI にドキュメントをドラフトしてもらったら、その後どうしていますか? コードの編集は AI に任せる機会が増える一方で、ドキュメントはまだエディタで手直ししている人も多いのではないでしょうか。

AI が生成した .md を手軽にプレビューし、気になる箇所を AI に伝える手段がない(面倒くさい)ことが課題だろうと思います。VS Code で開いて何行目を直してMermaid 図のこのノードを修正して — こうした指示を、プロンプトに毎回書くのは面倒ですよね。

人 と AI が協働するための Markdown ビューア

この課題を解決すべく、MarkdownPointer を開発しました。レンダリングされた Markdown の任意の要素をクリックすると [filepath:line] 内容 形式のリンク情報がクリップボードにコピーされます。行だけでなく、テーブル内のセルや、Mermaid 図の要素も指すことができます。それを AI のプロンプトに貼り付けて、修正すべき箇所をピンポイントで指示できます。

コンセプトは "Vibe writing for Markdown — 見たものを指さして、AI に直してもらう" です。

image.png

修正したい場所をクリックして、プロンプトに貼って AI に指示すると:

このノードに色をつけて [C:\docs\architecture.md:6] mermaid node: mdp.exe

色がつきました:
image.png

主な機能

機能 説明
Point & Prompt 見出し・コードブロック・テーブルセル・Mermaid ノードなどをクリックして [filepath:line] 内容 をコピー
Mermaid Flowchart / Sequence / Class / State / ER / Gantt / Pie / Git graph / Mindmap
KaTeX インライン $...$ とブロック $$...$$ の数式
SVG 埋め込みフォント付き SVG の表示
Live Reload ファイル変更を検知して自動更新
Recent Files ピン付きクイックアクセス
Tab Dock/Undock タブをウィンドウ間でドラッグ、または別ウィンドウに分離
Always on Top ウィンドウを最前面に固定
Export .pptx(built-in Open XML)、.docx(Pandoc 経由)
Import .docx / .pptx を Markdown に変換(画像も抽出)
MCP server ドキュメントのオープン・ナビゲーション・エクスポート・インポートを AI が直接操作

インストール

PowerShell 7.4+ がある環境なら、1行でインストールできます。

Install-PSResource MarkdownPointer

必要な環境

使い方

PowerShell 7.4+ コンソールで操作してください。ファイル名は Tab もしくは Ctrl+Space で補完入力できます。

ファイルを開く

mdp README.md, report.md   # ファイルを開く
mdp docs\*.md              # ワイルドカードで複数ファイルをタブで開く
mdp                        # ビューアだけ起動

ファイルの指定行にジャンプ

mdp docs\report.md 50

エクスポート

# .pptx にエクスポート
ConvertTo-Pptx .\slides.md

# .docx にエクスポート
ConvertTo-Docx .\README.md

# ワイルドカードで複数の .md を一括変換
ConvertTo-Docx .\docs\*.md -OutputDirectory .\out

いずれも Pandoc のインストールが必要です。ビューアの右下にある Export ボタンからも実行できます。

キーボードショートカット

ショートカット 操作
Ctrl+O ファイルを開く
Ctrl+W / Ctrl+F4 タブを閉じる
Ctrl+Tab / Ctrl+Shift+Tab タブ切り替え
マウスホイール スクロール
Ctrl+マウスホイール ズーム
Ctrl+F ページ内検索
Ctrl+G 行ジャンプ
Ctrl+P 印刷
F5 リロード

MCP サーバーとして AI に接続する

MarkdownPointer を MCP サーバーとして AI に登録すると、AI がドキュメントのオープンやエクスポートを自律的に行えるようになります。

MCP については、下記をご参照ください。

npm でセットアップ(推奨)

Node.js がインストールされていれば、npm パッケージひとつで MCP サーバーとビューアの両方がセットアップされます。PowerShell モジュールの別途インストールは不要です。

Claude Code:

claude mcp add mdp -- npx -y markdown-pointer

Claude Desktop (%APPDATA%\Claude\claude_desktop_config.json):

{ "mcpServers": { "mdp": { "command": "npx", "args": ["-y", "markdown-pointer"] } } }

その他の MCP クライアント: npx -y markdown-pointer をコマンドとして設定してください。

PowerShell モジュールでセットアップ

インストール した後、PowerShell 7 コンソールで次を実行してください。

Claude Code:

Register-MdpToClaudeCode

Claude Desktop:

Register-MdpToClaudeDesktop

Microsoft Store(MSIX)版の Claude Desktop をお使いの場合: MSIX のファイルシステム仮想化により、Register-MdpToClaudeDesktop が正しい設定ファイルに書き込めないことがあります。再起動後に MCP ツールが表示されない場合は、Claude Desktop の Settings → Developer → Edit Config で実際の設定ファイルを開き、手動で以下を追記してください。

{ "mcpServers": { "mdp": { "command": "<Get-MarkdownPointerMCPPath -Escape の出力を貼り付け>" } } }

Claude Desktop をお使いの場合は、ぜひ PowerShell.MCP を併用して下さい。AI が直接 .md ファイルを出力できるようになります。Claude Code ユーザーの方にもお勧めします!

PowerShell.MCP のインストールは、PowerShell 7 コンソールで Install-PSResource PowerShell.MCP を実行したら、Register-MCPToClaudeDesktop を実行するだけです。詳細な手順は下記にあります。

登録後に MCP サーバーへの接続エラーが出る場合は、.NET 10 Desktop Runtime がインストールされていない可能性があります。.NET 10 は Windows に標準搭載されていないため、別途インストールしてください。

登録後はプロンプトで操作できます:

  • 「README.md を mdp で開いて」
  • 「このプロジェクトを分析して、アーキテクチャドキュメントを作成して mdp で開いて。Mermaid を活用して」
  • 「report.md を docx にエクスポートして」
  • 「slides.md を pptx にエクスポートして、スライド 3 を見せて」
  • 「この pptx を Markdown にインポートして、内容を要約して」
  • 「mdp の今の状態を教えて」

MCP ツール一覧

ツール 説明
show_markdown Markdown/SVG ファイルを開き、指定行にスクロール
get_status 現在のウィンドウ/タブ状態を取得
slide_control reveal.js スライドのナビゲーション
get_slide_info スライドの形状・内容をテキストで取得
get_slide_image スライドを PNG 画像で取得(PowerPoint が必要)
export_document .pptx(built-in)または .docxPandoc)にエクスポート
import_document .docx / .pptx を Markdown にインポート(画像も抽出)
tag_asset インポートしたファイルや画像を index.json でタグ付け

Vibe writing の作業例

Claude Code(.md を生成でき、ローカル MCP サーバーをサポートする任意の AI)に、MarkdownPointer を構成して操作して下さい。

1. 次のようなプロンプトで、.md ファイルを作成:

C:\tmp\Proj を評価して、proj_eval.md を作成して mdp で開いて。Mermaid を活用して。

2. MarkdownPointer で、気になる部分をクリック

3. AI のプロンプトに貼り付けて指示:

このノードの直後に、「レビュー」ステップを追加して [C:\docs\report.md:42] 実装

4. AI がファイルを直接編集 → MarkdownPointer が自動更新 → 2. に戻る

この手順を繰り返して、.md ファイルを洗練していくことができます。

まとめ

MarkdownPointer は、以下の3点を1つのパッケージで提供します:

  • Point & Prompt — クリックした場所を AI にコピー
  • 高機能ビューア — Mermaid / KaTeX / SVG を含む Markdown を自動更新
  • MCP サーバー — AI がドキュメントを直接操作

PowerShell 1行でインストールできます。ぜひお試し下さい。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?