dsh レンダリングプラグイン図解:AI の回答が図表・アニメ・ニュース組版になる
dsh-raw-html 第3弾を実測解説。インストールから最初のレンダリングカード、図表カード、canvas アニメ、スタイルシステム、ニュースダイジェストまで、8 枚のスクリーンショットと元動画へのタイムスタンプリンクでたどる完全ガイド。
最終更新: 2026-10-15
初期状態の DeepSeek Harness セッションは「読める」だけで「見えない」ものです。回答はプレーンテキストで、経過はツールトレースの中。dsh-raw-html レンダリングプラグインを入れると、回答がはじめて「見える」ものになります。HTML カード、チャートカード、canvas アニメ、新聞風レイアウトがチャットストリームの中に直接生まれるのです。
本ページの 8 枚のスクリーンショットは、Bilibili の「愛喵喵的栗子」さんによる実測動画(単一ソース、CC 字幕なし)から採取したもので、すべての画像に元動画の該当秒へ飛べるタイムスタンプリンクが付いています。画面の「藍沙・鯨魚娘メイド」はコミュニティ製テーマのスキンです。これは dsh テーマシステムの正しい使い方であり、レンダリング能力の見せ台でもあります。デフォルト UI は淡色のシンプルデザインです。
3 行でわかる
- ▸dsh-raw-html は VCP プレビューレンダリングプロトコル準拠のプラグイン。入れて「</> レンダリング」トグルを開けば、AI が書いた HTML カードがチャット内でそのまま描画されます。設定はゼロ。
- ▸描けるのはテキストだけではありません。資金調達の棒グラフとヒートドット、canvas パーティクルアニメ、ニュース速報の組版、KaTeX 数式、Mermaid 図、埋め込み動画までもがカードになります。
- ▸安全は階層化されています。標準モードは script / iframe / on* をすべてブロックし、スクリプト実行は信頼モードのみ。テーマはスキン、プラグインはレンダリング担当なので、別々に入れられます。
「見える」チャットまでの 8 ステップ
グループ 1 · 導入と変身
- 1
導入前:プレーンテキストと味気ないツールトレース
デフォルトの淡色 UI では、新規セッションは入力ボックスだけ。動画のこの場面では天気を尋ねると、トレースにコンテキスト注入が 3 回続き、さらに Tool call Error: Location not found: 上海。アシスタントが get_weather Shanghai と拼音に変えてようやくデータを取れた——経過はすべてログを読んで追うしかなく、回答自体は相変わらずただのテキスト一段落です。
探索未至之境 · 预览版标准模式 · DeepSeek-V4-Flash · High
導入前:デフォルト淡色 UI。回答はテキストのみで、経過はツールトレースの中。元動画の 0:30 を見る - 2
コミュニティテーマを読み込む——まずは画面が変わる
まず「藍沙・鯨魚娘メイド」コミュニティテーマを読み込みます。背景は水中宫殿、左側はメイドの立ち絵、返信には「うれしい」スタンプも。ただしこの段階で変わったのはスキンだけ。チャットの中身はまだプレーンテキストで、レンダリングエンジンは次のステップのプラグインの仕事です。
鸣哇!是先生的声音~咕噜噜~!开心
スクショはコミュニティテーマのスキンです(デフォルト UI は淡色シンプル)。この時点で変わったのはスキンのみ。元動画の 1:18 を見る - 3
最初のレンダリングカード:プラグインの自己紹介
「まず、このプラグインは何のためのもの?」と送ると、チャットに最初の黒いカードが生まれます。dsh-raw-html v0.6.0 · パッチ v6.38 の紹介カードで、「レンダリングエンジン」「vcp-fast 高速化」「設計仕様」の 3 カラム、右上には「HTML をダウンロード」ボタン。AI の回答がはじめてインターフェースになった瞬間です。
dsh-raw-html v0.6.0 · 补丁 v6.38渲染引擎 · vcp-fast 加速 · 设计规范下载 HTML
プラグインの自己紹介:レンダリングエンジン、vcp-fast(1200→6800 セル/秒)、設計仕様。元動画の 1:53 を見る
グループ 2 · 見える化のすべて
- 4
チャートカード:資金調達ランキングがひと目でわかる
データを頼むと、プラグインは「美學系統」の青磁ブルー・データ風(PORCELAIN-DATA)でカード丸ごと組みます。2026 年上期の AI 分野別資金調達の棒グラフ——大モデルが 320(億ドル)で突出、自動運転 210、医療 140、金融 120 が続く——に加え、北米 46 ドット、アジア太平洋 33、欧州 14、その他 5 のヒートドットグリッドまで付きます。
大模型一骑绝尘,占上半年融资额三分之一北美洲 46 点 · 亚太 33 点 · 欧洲 14 点 · 其他 5 点
チャートカードには棒グラフとヒートグリッド。スタイルは「美學系統」の青磁ブルー・データ風。元動画の 2:30 を見る - 5
canvas アニメと信頼モードの安全境界
アニメはレンダリングの試金石です。標準モードでは script / iframe / on* を一律ブロックするため、canvas は黒い空パネルで、HUD の 3 マス(TRUSTED::EXECUTED、BALLS::14、BOUNCES::0)は CSS で書かれた静的な文字列にすぎません。信頼モード(extractTrustedScripts / flushTrustedScripts)に切り替えると、パーティクルは本当に動き出します。カードの下部には「アニメが動いている」「空パネルのみ」の比較ボタンまで用意され、自分の手で確かめられます。
TRUSTED::EXECUTED · BALLS::14 · BOUNCES::0动画在跳 / 只有空面板
標準モードはスクリプトを止めて空パネルのまま。信頼モードに変えると本当に動きます。元動画の 2:48 を見る - 6
「美學系統」:出力にデザイン仕様を与える
「美學系統」モーダルを開くと、すぐ使えるスタイルが並びます。青磁ブルー・データ風、侘寂・文学散文風、編集部レッド・新聞夕刊風、高透過ガラス・Y2K フューチャー風など、どのプリセットにもカラーパレットとフォントプレビュー付き。タイトルをクリックすれば試着でき、マウントすると設計仕様一式がシステムプロンプトに注入され、AI の出力にレイアウトが生まれます。
美学系统青瓷蓝·数据风 · 侘寂·文学散文风 · 编辑部红·新闻晚报风
タイトルをクリックして試着。パレット・フォント・組版仕様がひとまとめです。元動画の 3:30 を見る - 7
ニュースカードの A/B 比較:組版はプラグイン CSS が担う
同じ日のニュースを「AI 産業夕刊(2026-08-29)」としてレンダリング。「A · 美學系統なし」は構造ブロックの注入のみで、描けてもスタイルライブラリを知らず、フォントはシステムフォールバック。「B · 美學系統 wire-news」は同じ見出しを「編集部レッド」のパレット・フォント・罫線で組版します。タブを切り替えれば差は歴然です。
AI 产业晚报(2026-08-29)A · 无美学系统 / B · 美学系统 wire-news
A は構造ブロックのみ。B は同じニュースを編集部レッドの書体と罫線で組版します。元動画の 4:12 を見る - 8
今度はあなた番:レンダリングトグルを開いて質問
入力ボックスに戻り、dsh-raw-html ワークスペースを選び、「</> レンダリング」を開いたまま質問を打って送信——ステップ 3 のようにカードがチャットの中に生まれます。図表もアニメも新聞組版も、すべてこのひとつの質問から始まります。
首先,我们这个插件,是用来干嘛的吖</> 渲染 · DeepSeek-V4-Flash · High
質問の瞬間:「</> レンダリング」を開いたまま送れば、カードはチャットに生まれます。元動画の 1:48 を見る
dsh レンダリングプラグインのよくある質問
レンダリングエンジンとテーマ、安全境界、パフォーマンス、対応コンテンツを 4 つの Q&A で。
リッチレンダリングはプラグイン?それともテーマ?
プラグインです。テーマはスキンにすぎません。dsh-raw-html は AI の出した HTML をチャット内のカードとして実際に描くレンダリングエンジンを担い、「藍沙・鯨魚娘メイド」のようなコミュニティテーマは背景・立ち絵・フォントといった外見だけを担当します。別々に入れても、動画のように重ねても OK。スキンはテーマ、描画はプラグインです。
AI が出す HTML の描画は安全?
デフォルトは安全です。標準モードは script・iframe・on* をすべてブロックし、静的なスタイルだけを描画します。信頼モードに切り替えるまで canvas が空パネルになるのはそのためで、実行には明示的な信頼モード(extractTrustedScripts / flushTrustedScripts)が必要です。ステップ 5 の 2 つの比較ボタンがまさにこの境界の実演です。
レンダリングでセッションが重くなりませんか?
プラグインは vcp-fast を内蔵し、キャッシュと増分レンダリングでハッシュが一致した部分は描き直しません。カードの文言ではセル速度が 1200 から 6800 へ、再描画は差分のみで約 12 倍。長いセッションをスクロールしても滑らかです。
どんな内容を描画できますか?
HTML カード、チャートカード(棒グラフ・ヒートドット)、SVG と canvas アニメ、インタラクティブページ、新聞や書籍の組版、KaTeX 数式、Mermaid 図、埋め込み動画に対応。「美學系統」の青磁ブルー・データ風や編集部レッド・新聞夕刊風などと組み合わせれば、組版はプラグインの CSS が一括して担います。
dsh をさらに掘る
レンダリングは dsh プラグイン生態系の一部です。次はこちらをどうぞ。
dsh ミニゲームプラグイン:チャットがゲーム機になる
リッチレンダリングの隣の世界。セッション内でそのまま遊べるミニゲームを、同じくコマ送り図解で。
ガイドを読むdsh オフィス文書プラグイン:Word / Excel を直接出力
チャートカードの実務派。納品できる docx / xlsx を AI に作らせる手順を全スクショで。
ガイドを読むUI・テーマコレクション:dsh の服を着替えさせる
鯨魚娘メイドが気に入った方はこちら。コミュニティの UI・テーマ・スキンをまとめて収録。
ガイドを読むdsh の 4 モード比較:標準・信頼、その先
ステップ 5 で触れた標準/信頼モードの境界を、モード総覧でより完全に对照します。
ガイドを読むコンテキスト圧縮:長いセッションが忘れない理由
カードが増えるとコンテキストも膨らむ。dsh がトレースを圧縮して要点を残す仕組み。
ガイドを読むdsh genui：AI の出力がインタラクティブ UI になる（図解）
OpenTiny コミュニティの dsh-genui ウォークスルーをフレームごとに解説：チャットからのインストール、列車フォームと並べ替えできるテーブル、その場で生成するポモドーロと電卓、そして GenUI プロンプトのスイッチ。
ガイドを読む出典とクレジット
本ページの 8 枚のスクリーンショットはすべて同一の実測動画から採取しました。コマ送りのデモをしてくださった Bilibili の「愛喵喵的栗子」さんに感謝します。dsh-raw-html 本体はオープンソースの VCP プレビューレンダリングプロトコル準拠プラグイン(「紅蓮の獅子」さんの VCP プロジェクトベース)。まだプラグインを入れていない方は、まず プラグイン導入ガイド