---
title: "Claude Code にターミナル内で mermaid 図、数式、動画をインライン描画させた"
url: "https://claudemods.dev/ja/builds/i-made-claude-code-draw-mermaid-diagrams-formulas-and-video--5b8db2"
source: "https://github.com/NateCC0902/NeonCoat"
source_type: "github"
repo: "https://github.com/NateCC0902/NeonCoat"
author: "No-Creme2531"
author_handle: "No-Creme2531"
stars: 0
category: "テーマ・外観"
categories: ["themes"]
tags: ["function-hooks", "kitty-graphics", "markdown", "mermaid", "statusline", "terminal-rendering"]
permission_level: null
scan_complete: false
added: "2026-10-12T00:22:34.000Z"
updated: "2026-10-11T15:49:13Z"
locale: "ja"
content_locale: "ja"
---

# Claude Code にターミナル内で mermaid 図、数式、動画をインライン描画させた

Claude Code 用の mod セット（reply-media、reply-markdown、ステータスライン）。mermaid 図、数式、画像、動画の先頭フレームをターミナル内にインライン描画し、コンテキスト、コスト、毎秒トークン数、キャッシュヒット率、git 状態、使用ウィンドウを表示するリッチなステータスラインを追加します。アーリーアクセスの function-hook プラグイン API を使用し、kitty グラフィック対応ターミナル（Ghostty または kitty）が必要で、macOS のみ、CLAUDE.md への追記も必要です。

## Description

著者は Claude Code 用に 3 つの mod を作成しました。reply-media は mermaid フェンス、数式、ローカル画像をターミナル内の実際の画像として描画し、ローカル動画の先頭フレームと再生ボタンを表示してその場で再生します。reply-markdown は見出し、リスト、コールアウト、表を色付きで描画し、各コードフェンスをコピーボタン付きのカードに入れます。ステータスラインは使用済みコンテキスト、コスト、毎秒トークン数、キャッシュヒット率、git 状態、使用ウィンドウ、他のセッションが何をしているかを表示します。Claude Code のアーリーアクセス mod API（function-hook プラグイン）に依存し、macOS のみで、Ghostty や kitty などの kitty グラフィック対応ターミナルが必要です。Claude は README が提供する数行を CLAUDE.md に追加した後にのみ、mod が描画するフォームを書きます。MIT ライセンスで、Claude Code 自体を使って構築されています。デモ GIF とスクリーンショットは README（https://github.com/NateCC0902/NeonCoat）にあります。

## Original README

A reply in Claude Code is plain text, so a mermaid block stays code and a formula stays raw LaTeX. I wanted them drawn, so I wrote a few mods: **reply-media** draws `mermaid` fences, math formulas and local images as real pictures in the terminal. A local video shows its first frame with a play button and plays in place. **reply-markdown** draws headings, lists, callouts and tables in color, and puts each code fence in a card with a copy button. **a status line** with context used, cost, tokens per second, cache hit rate, git state, usage windows, and what my other sessions are doing. Demo GIF and screenshots are in the README: https://github.com/NateCC0902/NeonCoat Before you try it: It uses Claude Code's mod API (function-hook plugins). That API is early access, so it can break. macOS only, and the pictures need a terminal with kitty graphics (Ghostty or kitty). Claude writes the forms the mods draw only if you add a few lines to your CLAUDE.md. The README has them. MIT licensed, and built with Claude Code itself. Tell me what breaks. submitted by /u/No-Creme2531 [link] [comments]