![[Show HN] MDV:データ対応で Docs、ダッシュボード、スライドを統括できるマークダウンスーパーセット](/_next/image?url=%2Fscreenshots%2F2026-04-19%2F1776553449645.webp&w=3840&q=75)
2026/04/19 0:24
[Show HN] MDV:データ対応で Docs、ダッシュボード、スライドを統括できるマークダウンスーパーセット
RSS: https://news.ycombinator.com/rss
要約▶
Japanese Translation:
MDV は、カスタムコードを必要とせずにチャート、KPI カード、テーブル、スタイル付き領域などのリッチメディア文書、ダッシュボード、スライドを作成することを可能にする Markdown の超集合です。厳密な CommonMark を基盤とし、YAML フロントマター、データ/ビジュアル用フェンスブロック、レイアウト用の「:::」コンテナ、自動生成目次用の「::::」の 4 つの追加機能を持っています。セレクターやクラスを使用せず、テーマと名前付きスタイルでデフォルトを定義することでこの必要を取り除いています。ツールはインライン SVG チャート(JavaScript ランタイムを使用しない)を備えた自立型 HTML ファイルをレンダリングし、PDF 出力もサポートします。ユーザーは VS Code で並列プレビュー機能を利用してプロジェクトに相互作用できます。
最初に行うことは、リポジトリをクローンする(
git clone <repo> mdv)、npm install を実行し、プロジェクトをビルドすることです。例のレンダリングは CLI 経由で行います(例:node packages/mdv-cli/dist/index.js render examples/09-full-report.mdv)。 whereas 自動リロード付きライブプレビューを開始するには、preview コマンドを使用します(node packages/mdv-cli/dist/index.js preview ...)。ドキュメントには「Getting Started」「Syntax Reference」「Charts & Stats」「Data handling」「Themes & Styles」「CLI usage」「VS Code extension」などのセクションが記載されています。マーケットプレイスは拡張機能の公開に使用され、examples/ ディレクトリには 10 つのサンプルファイルが含まれ、そのレンダリング出力は examples/out/ にあります。現在はバージョン 1(プレリリース)であり、Node.js バージョン 20 以上が必要です。詳細な仕様とロードマップは docs/superpowers/specs/2026-04-18-mdv-format-design.md に記載されています。本文
MDV — Markdown データおよび可視化フレームワーク
Markdown のスーパーセットを用いて、文書、ダッシュボード、スライドを記述します。単なるフェンス付きコードブロックと命名されたスタイルを追加するだけで、チャート、KPI カード、テーブル、スタイリング可能な領域を容易に追加できます。
.mdv は厳格な CommonMark に以下の 4 つの機能を追加した規格です:
- タイトル、テーマ、命名されたスタイル、データセット参照を記述するための YAML フロントマター。
- データおよび可視化用のフェンス付きブロック:例として、```chart type=bar x=region y=sales のように指定できます。
- スタイリング可能な領域とレイアウト用のコンテナ ::: :例として、::: callout や ::: columns などがあります。
- 自動生成された目次用の ::: toc 。
セレクター、クラス、式、コードは一切不要です。テーマにはデフォルト値が設定され、命名されたスタイルは再利用可能な外観を提供します。レンダラーが残りの処理を行います。
簡単なサンプル
title: Q1 リポート theme: report data: sales: ./data/sales.csv
::: toc :::
第 1 四半期の成果
label, value, delta 総収益、$2.06M、+14% 新顧客、1,238 名、+8%
これらは自己完結型の HTML(チャートはインライン SVG、JavaScript ランタイム不要)および PDF へレンダリングされます。VS Code ではサイドバイサイドのプレビュー機能により環境内に組み込むことが可能です。
始め方 git clone <リポジトリ> mdv cd mdv npm install npm run build
サンプルをレンダリングする
node packages/mdv-cli/dist/index.js render examples/09-full-report.mdv
または:自動リロード付きライブプレビュー
node packages/mdv-cli/dist/index.js preview examples/09-full-report.mdv 詳細な手順については docs/getting-started.md をご参照ください。
ドキュメント
- 始め方 — インストール、初めてのファイル作成、レンダリングの確認
- シNTAX リファレンス — フロントマター、フェンス付きブロック、::: コンテナ
- チャートと統計グラフ — 全ての可視化タイプとそのオプション
- データ — インライン CSV/JSON、ファイル参照によるデータセット
- テーマとスタイル — 組み込みテーマおよび命名スタイルの定義方法
- CLI — レンダリング、プレビュー、PDF エクスポート
- VS Code 拡張機能 — サイドバイサイドライブプレビュー対応
- VS Code 拡張機能のパブリッシング — Marketplace のワークフロー
サンプル examples/ フォルダには機能を網羅する 10 つのサンプルファイルが含まれています。レンダリングされた HTML は examples/out/ フォルダにあります。
ステータス バージョン 1(リリース前版)。Node.js バージョン 20 以上で動作します。範囲、非目標、ロードマップについては docs/superpowers/specs/2026-04-18-mdv-format-design.md をご参照ください。