Simon-He95/markstream-vue

何を解決するか

標準的な Markdown レンダラーは静的ドキュメント用に設計されています。AIチャットインターフェースでテキストがトークン単位でストリーミングされる場合、ドキュメントが再解析・再レンダリングされるたびに視覚的なちらつき、メモリの急上昇、レイアウトのずれが発生することがあります。markstream-vue は、こうしたストリーミング状態に特化して最適化された安定した高パフォーマンスレンダラーを提供し、複雑なフォーマットを損なうことなく、なめらかな「タイピング」効果を実現します。

動作方法

このプロジェクトは Vue 3（およびサブパッケージによる他のフレームワーク）向けの特別なレンダラーを提供します。不完全な Markdown 構文を処理でき、2つの主要なレンダリングモードを採用しています：長文ドキュメント用の仮想ウィンドウと、チャット風ストリーミング用のインクリメンタルバッチ処理。stream-markdown-parser と連携して部分的な Markdown 状態の処理を実現し、Mermaid 図表、KaTeX 数式、ストリーミングコードブロック（stream-diffs パッケージ経由）など重いブロックのプログレッシブレンダリングをサポートしています。

対象ユーザー

AIチャットUI、LLM駆動アプリ、または Server-Sent Events (SSE) や WebSocket による Markdown テキストストリームを扱うインターフェースを開発している開発者。プロフェッショナルでちらつきのないユーザー体験を必要とする方々です。

特徴

• ストリーミング最適設計：AIトークンストリーム中におけるちらつきの最小化と、予測可能なメモリ使用量の維持を目的としています。
• マルチフレームワーク対応：このパッケージは Vue 3/Nuxt/VitePress 向けですが、Markstream ファミリーには React、Svelte、Angular、Vue 2 用のアダプタも含まれます。
• 豊富なメディア対応：Mermaid 図表、KaTeX 数式、D2 インフォグラフィックのプログレッシブレンダリングをサポートします。
• 高度なコードブロック：stream-diffs と連携し、リアルタイムで更新されるコードおよび差分ブロックのレンダリングを強化します。
• 柔軟なレンダリングモード：チャット用の一定のペースを保つ chat モードと、豊かなドキュメントレイアウトを実現する docs モードを提供します。