lexicalエディタでMermaid記法で図を描けるようにするプラグインを作った

facebookが公開しているlexicalエディタというリッチテキストエディタのライブラリがあって、便利に使っている。

lexical.dev

エディタstateを管理するためのコアライブラリといくつかのプラグインが提供されていて、プラグインの仕様に沿ったReactコンポーネントを作ることでエディタ上で実現したい機能を拡張していくことができる。
プラグインの仕様がとても良くできているし、selection APIに介入したりdecorateができたりと非常に柔軟な拡張ができるので、2025年12月時点ではReactを使ったフロントエンドに高機能なリッチテキストエディタを導入したい場合はおすすめできる。

最近MermaidでER図を作る機会があり、lexicalエディタでも描けるといいなーと思ったのでプラグインを作って公開してみた。 せっかくなのでコードは全てClaude Codeに書かせてみた。

https://www.npmjs.com/package/lexical-mermaid

GItHubはこちら

github.com

READMEに詳しく載せているが、こんな感じでlexicalエディタ上でMermaidで描いた図と入力フォームを切り替えて使える。 Storybookが付いているので簡単に動きを試せます。

```mermaid とMarkdown風に入力して改行するとMermaid記法入力コンポーネントが挿入されるようにもできる。

使い方はプラグイン（Reactコンポーネント）を置くだけ。

<LexicalComposer initialConfig={editorConfig}>
  <div className="editor-container">
    <RichTextPlugin
      contentEditable={<ContentEditable className="editor-input" />}
      placeholder={<div className="editor-placeholder">テキストを入力...</div>}
      ErrorBoundary={LexicalErrorBoundary}
    />
    <MermaidPlugin />{/* Mermaidの図&入力フォームコンポーネント */}
    <MermaidMarkdownPlugin />{/* Markdown風の入力受け付け */}
  </div>
</LexicalComposer>

入力フォームのスタイルはpropsで指定できるのと、INSERT_MERMAID_COMMAND コマンドを用意しているので、図のタイプごとに初期テンプレートを入れるみたいなこともできます。
興味があれば、詳しくはREADMEを見てみてください。

Claude Codeだけで作ってみた

これまでClaude Codeはちょっとしたタスクをやってもらうのに使っていたけど、これくらいのライブラリをClaude Codeに全部書かせてnpmに公開できる品質のものが作れるのかを試したかったので、自分はコードを書かない縛りで作ってみた。

ざっくりこんな感じで進めた。

  1. Claude.ai で今回必要そうな知識と設計の相談
    • 「lexicalエディタのプラグインの仕様を教えてください」
    • 「Mermaid.jsの仕様と内部の仕組みを教えてください」
    • 「lexicalエディタのMermaid.jsのプラグインを作りたいのですが、どういう設計が考えられますか？」
  2. npmプロジェクトを作ってClaude Codeを起動
    • 「lexicalというリッチテキストエディタのライブラリがあるのですが、Mermaidが書けるプラグインを作りたいです」
    • 「動作確認したいので、storybookを用意してください」
    • storybookを動かして見つかったバグを修正
  3. Claude Codeに追加したい機能をお願い
    • 「PNGエクスポートがしたいので図の右上にエクスポートするためのボタンを追加してください」
  4. Claude Codeに公開するにあたりリポジトリの整備をお願い
    • 「このライブラリはlexicalエディタを使っている人が組み込むのを前提としているので、package.jsonの依存関係を修正してください」
    • 「このリポジトリのREADME.mdを作ってください。README.mdは英語でお願いします」
    • 「eslintの設定ファイルとチェックコマンドを作ってください」
    • 「これまでの作業内容を踏まえてCLAUDE.mdを作ってください。CLAUDE.mdは英語でお願いします」

これだけ。

Claude Codeすごい。CLAUDE.md を最初に作らずとも、プロンプトの指示だけで先のGitHubに上げたくらいのコードであれば作れてしまうのがすごい。
「lexicalというリッチテキストエディタのライブラリがあるのですが、Mermaidが書けるプラグインを作りたいです」と指示したときの plan mode が思った通りの内容で感動した。
これくらいの規模のライブラリの新規実装であれば、CLAUDE.md 作らなくても十分な品質のコードが作れることが分かったのは収穫。
よくあるライブラリ構成のフロントエンドの場合、CLAUDE.md は作らなくても結構いけるよねと思ってたので合ってた。
もちろん大規模リポジトリやコミットする人のレベル感がばらけている場合は CLAUDE.md や slash commands は最初に作った方がいいと思う。

品質に一番効いた指示は、第一版ができた直後にstorybookを作らせたこと。
これによって、修正のたびにClaude Codeがstorybookを起動して動作を確認してブラウザ上のエラーが起きない状態にしてから完了通知をくれるので、挙動に満足できるかのチェックと生成されたコードのチェックだけに集中できるようになりました。

  • メジャーなフロントエンドライブラリはみんな使っているので学習されている情報がおそらく多く、plan modeの精度が高い
  • APIはモック、UIはstorybookを用意するなど、外部サービスに依存せず個別で高速に動く動作環境を簡単に起動できるので、生成AIの確認が正確且つ高速でストレスにならない

という点からフロントエンドは生成AIとの相性がいいなあと実感できた。
サーバサイドは見落としがあった際のデメリットが大きすぎるので、まだ補助的な使い方でいきたい感はあるけど

改めてstorybookは生成AI時代のフロントエンドとの相性がいいな。 デザインシステムレベルの細かいコンポーネントのカタログという固定観念があったんだけど、APIモック周りを整備した上で、コンテナコンポーネントレベルでもstorybook作って確認させればよさそう。