kanji-graph

Interactive web tool for visualizing connections between Japanese words you've learned. Words are linked by shared kanji, identical readings, visually similar kanji, or alternate spellings. Personal study/revision aid built as a single-page static site.

---

More screenshots

Live demo

---

Features

• Graph view -- force-directed canvas graph; hover a word to highlight its connections
• Word view -- click a word to zoom in, reposition neighbors radially, and see per-kanji detail
• Multi-entry words -- words with multiple dictionary senses show a prev/next navigator in the details panel
• Search -- type anywhere to search by kanji, kana reading, or romaji; arrow keys + Enter to jump
• Four edge types -- shared kanji, same reading, visually similar kanji, alternate spellings; each drawn in a distinct line style (solid / zigzag / wavy / double) as well as color
• Pronunciation audio -- local Yomitan audio server or browser TTS
• Clipboard sync -- copy a word anywhere and the graph focuses it automatically (opt-in)
• Persistent layout -- node positions saved to localStorage so that the graph persists between reloads

Quick start

npm install
npm run fetch-jitendex  # download Jitendex dictionary (one-time)
npm run build-graph     # generate public/graph.json from data/words.txt
npm run dev             # start dev server

Commands

Command	What it does
npm run dev	Start the Vite dev server
npm run build-graph	Read data/words.txt, look up each word, write public/graph.json
npm run fetch-jitendex	Download the latest Jitendex Yomitan zip
npm run fetch-freq-dict	Download the JPDB frequency dictionary zip
npm run fetch-jmdict-furigana	Download the JmdictFurigana per-kanji reading zip
npm run build	Type-check + production build to dist/
npm run preview	Serve the production build locally

Run build-graph whenever you edit data/words.txt or data/similar-kanji.tsv. public/graph.json is a build artifact and is gitignored.

Data files

data/words.txt

One Japanese word per line. Lines starting with # and blank lines are ignored.

人
丁寧
日本語

data/similar-kanji.tsv

Tab-separated groups of visually similar / commonly confused kanji, one group per line. All kanji within a group are treated as mutually similar. Order within a group doesn't matter; duplicates are ignored.

大	太
日	目
木	本	末	未

Dictionary setup

build-graph looks up each word in Jitendex, falling back to a small built-in seed list if the dictionary isn't present.

npm run fetch-jitendex                              # download to default shared location
npm run fetch-jitendex -- --force                   # re-download even if already present
JITENDEX_PATH=/path/to/jitendex.zip npm run build-graph  # use a custom zip path

Jitendex can also be downloaded manually from https://jitendex.org.

The pipeline checks three locations in order:

1. $JITENDEX_PATH env var
2. data/dict/jitendex.zip relative to the project root
3. Default shared location: ~/.local/share/japanese-dicts/jitendex.zip (Linux/macOS) or %LOCALAPPDATA%\japanese-dicts\jitendex.zip (Windows)

JITENDEX_PATH accepts any Yomitan-format dictionary zip, not just Jitendex. If you've already downloaded a Yomitan dictionary (e.g. JMdict), point JITENDEX_PATH at that file directly.

Frequency dictionary

fetch-freq-dict downloads the JPDB frequency list (Yomitan format) for use in the build pipeline.

npm run fetch-freq-dict                              # download to default shared location
npm run fetch-freq-dict -- --force                   # re-download even if already present
JPDB_FREQ_PATH=/path/to/jpdb-freq-list.zip npm run build-graph  # use a custom zip path

Furigana data

fetch-jmdict-furigana downloads JmdictFurigana, a precomputed per-character furigana segmentation for JMdict. The build pipeline uses it to tell whether a shared kanji is read the same way in both words, so those edges can be styled differently (solid when the reading matches, dashed when it differs). It's optional -- without it, shared-kanji edges all render solid.

npm run fetch-jmdict-furigana                        # download to default shared location
npm run fetch-jmdict-furigana -- --force             # re-download even if already present
JMDICT_FURIGANA_PATH=/path/to/JmdictFurigana.json.zip npm run build-graph  # use a custom zip path

The pipeline checks $JMDICT_FURIGANA_PATH, then data/dict/jmdict-furigana.json.zip, then the default shared location -- same order as the Jitendex lookup above.

The file is saved to the same shared location as Jitendex by default (~/.local/share/japanese-dicts/ on Linux/macOS, %LOCALAPPDATA%\japanese-dicts\ on Windows).

Clipboard sync

Enable Settings > Clipboard > Follow clipboard to have kanji-graph focus a word automatically when you copy it elsewhere.

Two mechanisms, depending on context:

• Paste (Ctrl+V) while on the graph page -- works over plain HTTP. Copy a word in Anki or a browser tab, switch to kanji-graph, paste. The graph focuses the word if it exists.
• Automatic on tab switch -- requires HTTPS or localhost. When the tab regains focus, kanji-graph reads the clipboard and focuses the word if it changed since the last check.

Words not in the graph are silently ignored in both cases.

Browser clipboard permission is required; support varies by browser.

Audio playback

Audio has two modes, toggled in Settings > Audio > Local audio server:

• Off (default): uses the browser's built-in Japanese TTS (ja-JP). Requires a Japanese language pack installed on your OS. It is noticeably lower quality than the local audio server.
• On: fetches from a local Yomitan audio server. The default URL template is http://127.0.0.1:5050/?term={term}&reading={reading}. Paste a custom template into the URL field that appears below the toggle.

Configuration

Key configuration files:

What	File
Port	vite.config.ts
App constants -- colors, localStorage keys, graph physics, audio defaults	src/lib/constants.ts
Build pipeline constants -- dictionary paths, data file paths, output path	scripts/constants.ts
Settings presets -- animation speeds, zoom levels, layout density, node size, neighbor spread values	src/lib/settings.ts
Word list	data/words.txt
Similar-kanji groups	data/similar-kanji.tsv
Audio server URL template	Settings > Audio > Local audio server

Disclaimers

• Personal hobby project, may not be actively maintained.
• Desktop only - designed for mouse and keyboard; mobile and touch devices are not supported.
• Cross-platform and cross-browser, but tested primarily on Ubuntu/Firefox.
• Developed with AI assistance (Claude).
• MIT licensed.