graphit
Build custom HTML dashboards from real data using the Graphit CLI. KB-aware queries, entity wrapping, cached data sources.
確かめやすいコードターミナル＋デスクトップペインBoxButtonCodeInputSvgText
何をするか
- 欄を描く
- Bash の呼び出しを見張る
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- デスクトップ専用の分岐がある
- エラーを扱う
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like graphit by Graphit (pane), as modscode read it from the mod's code:
// https://modscode.com/gallery/omry-graphit-graphit/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
// the pane: open it with $.ui.open({ id: 'my-pane', title: "Knowledge Base" })
on('ui.render', { component: 'Pane', requestId: 'my-pane' }, async ($, e) => {
const { Box, Text, Button } = $.ui.resolve(e)
const kind = '…'
const cell = '…'
const error = '…'
const description = '…'
const label = '…'
const cell2 = '…'
const label2 = '…'
const cell3 = '…'
const label3 = '…'
const cell4 = '…'
const cell5 = '…'
const cell6 = '…'
const cell7 = '…'
const cell8 = '…'
const cell9 = '…'
const cell10 = '…'
const cell11 = '…'
const cell12 = '…'
const cell13 = '…'
const cell14 = '…'
const cell15 = '…'
const cell16 = '…'
const cell17 = '…'
const cell18 = '…'
const cell19 = '…'
const cell20 = '…'
const cell21 = '…'
const cell22 = '…'
const cell23 = '…'
const cell24 = '…'
const cell25 = '…'
const cell26 = '…'
const cell27 = '…'
const cell28 = '…'
return (
<Box flexDirection="column" gap={1} paddingX={1}>
<Box flexDirection="column">
<Box gap={1}>
<Text color="#ffffff" bold>
{` ${kind} `}
</Text>
<Text bold>
{cell}
</Text>
</Box>
<Text dimColor>
Loading the definition…
</Text>
<Text color="red">
{error}
</Text>
<Text>
{description}
</Text>
<Text dimColor>
{`No ${kind} definition read in this CLI version.`}
</Text>
</Box>
<Box flexDirection="column">
<Text dimColor bold>
DEFINITION
</Text>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
{label}
</Text>
</Box>
<Text bold>
{cell2}
</Text>
</Box>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
{label2}
</Text>
</Box>
<Text bold>
{cell3}
</Text>
</Box>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
{label3}
</Text>
</Box>
<Text bold>
{cell4}
</Text>
</Box>
</Box>
<Box flexDirection="column">
<Text dimColor bold>
IN THIS QUERY
</Text>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
Written
</Text>
</Box>
<Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell5}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell6}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell7}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell8}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell9}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell10}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
</Text>
</Box>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
Compiled
</Text>
</Box>
<Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell11}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell12}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell13}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell14}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell15}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell16}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
</Text>
</Box>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
Compiled
</Text>
</Box>
<Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell17}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell18}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell19}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell20}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell21}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell22}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
</Text>
</Box>
<Box gap={2}>
<Box minWidth={10}>
<Text dimColor>
Compiled
</Text>
</Box>
<Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell23}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell24}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell25}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell26}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
<Text>
<Text dimColor>
{"{{ "}
</Text>
<Text bold>
{cell27}
</Text>
<Text dimColor>
('
</Text>
<Text bold underline>
{cell28}
</Text>
<Text dimColor>
{"') }}"}
</Text>
</Text>
</Text>
</Box>
</Box>
<Box gap={1}>
<Button label="Copy reference" />
<Button label="Copy SQL" />
</Box>
</Box>
)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
hooks/query-view/register.tsx319〜323 行hooks/query-view/panes.tsx17〜102 行hooks/query-view/spans.tsx27〜47 行
コードが呼ぶもの
プログラム起動ファイル書き込み環境変数ツール呼び出し
コードから読み取ったデザイン
Claude に頼む…
Knowledge Base
note Compiles to
Loading the definition…ReloadGraphNo note definition read in this CLI version.DEFINITION
build
Compiles tobuild
Compiles tobuild
Compiles toIN THIS QUERY
Written
{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}Compiled
{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}Compiled
{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}Compiled
{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}{{ Compiles to('Compiles to') }}Copy referenceCopy SQL
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 1f4ea9230d7e のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。hooks/query-view/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。14 ファイルを解析 |
| コードが Mod の中で完結 | import は Mod 自身のファイルかエンジンのモジュールだけ。パッケージも require もない。コードはすべて Mod の中 |
| 読める | 圧縮した行・eval・new Function・計算した道の import()・符号化した塊がない。圧縮・eval・符号化した塊なし |
| 呼び出しが見える | 通信とプログラム起動はその場で $.http.fetch・$.process.run と書き、他へ渡さない。外への呼び出しはすべてその場の $ で |
| 入れる前に自分で判断する材料 | |
| 描く場所 | コードから読んだ、描く先。ターミナル・デスクトップアプリ・両方・何も描かない（フックだけ: 見張りやプロンプトの書き換え）のどれか。出すだけで、外す理由にはしない。ターミナルとデスクトップアプリに描く（デスクトップ用の分岐あり） |
| 入れる手順 | リポジトリ自身の .claude-plugin/marketplace.json にこの Mod が載っていて、ページに書いた手順でそのマーケットプレイスから入れられるか。リポジトリの .claude-plugin/marketplace.json に載っており、そこから入れられる |
| Windows のプログラム | $.process で起動するプログラムが Windows にあるか（tail・date・open・osascript・/usr/… などは無い）。Windows にないプログラムを使わない |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。hooks/query-view/register.tsx:101 実行時に決まるプログラム |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。ライセンスなし |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリがそのままマーケットプレイスです。このマーケットプレイスを足し（ターミナルでは次のコマンド、デスクトップアプリではプラグインの設定）、そこから Mod を入れます。
/plugin marketplace add omry-graphit/graphit-plugin/plugin install graphit@graphit-plugin入るのはマーケットプレイスの最新のコミットで、ここで読んだもの（1f4ea9230d7e）と違うことがあります。入れる前に見比べてください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「omry-graphit-graphit」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…Files⋯
│●./file-name.tsx│●./file-name.tsx│●./file-name.tsxNew file Move to Recycle Bin?────────./menu-item.tsx./menu-item.tsx./menu-item.tsx────────./menu-item.tsx./menu-item.tsx./menu-item.tsx────────./menu-item.tsx./menu-item.tsx./menu-item.tsx -
Claude に頼む…Approved appsApproved appsComputer use can control these apps without asking.High riskAlways allowed (3)None. Allow one below.Not installed (3)This conversation (3)None.Allow an app App name, bundle id or path allowbuilda1b2c3dbuilda1b2c3dbuilda1b2c3d
-
slop Edit1 of 3accepteditrejectClaude に頼む…
-
Claude に頼む…Skins0 Your promptadd rate limiting to the hub api0 Tool rows: finished, running, failedYour prompt Spinner0 Folded group of reads and searches●main · note 3 · note 3 · note 30 Edit diff cardDesktop only; the terminal keeps Claude Code's diff.0 Shell output cardDesktop only.0 Code block cardDesktop only; the terminal keeps Claude Code's markdown.0 TableAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopyAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentAccentCopy0 SpinnerAccent SpinnerSpinnerSpinner… 2h 10m0 Band above the prompt: normal, then nudging to compact█████░░░ 42% build█████░░░ 42% build█████░░░ 42% buildContext is 42% full0 Compact now0 Band above a questionTable BashBashBash0 Turn footer (terminal)3 build in 2h 10m · Grep · +3 −3
-
Claude に頼む…Review plannerEXAMPLE · REVIEW PLANNINGPrepare a focused reviewDemo data and a manual checklist. No code has been inspected.Review scope Chat composer: draft handling and keyboard focuscorrectnessView example diffPreparation checklist42%✓Fix loginExample diffUndo✓Fix loginExample diffUndo✓Fix loginExample diffUndoPrepare review promptReset checklistPreparing a prompt only updates the draft. Nothing is sent.
-
Claude に頼む…Mod controlsLive Claude ModCount: 0 / Initial / oneAdd oneName InitialOne**Markdown** with a [link](https://example.com)
const count = 1;
./counter.tsxFill composerAppend noteSuggest draftCopy text