通常システム開発
DocusaurusにPlantUMLを表示するテーマを作ってプロンプト
Docusaurus向けPlantUML表示テーマの開発
DocusaurusでPlantUMLダイアグラムを表示するためのカスタムテーマを作成する
Docusaurusのテーマである'theme-mermaid'を参考にして、コードブロックで指定されたPlantUMLをレンダリングし表示するカスタムテーマを作成する。レンダリングにはPlantUMLサーバーを利用し、コードハイライトが特定キーワードを含む場合にPlantUMLダイアグラムに置き換える。ライトモードとダークモードに応じて異なるPlantUMLエンドポイントを使用し、typescriptで実装される。このカスタムテーマは、docusaurus.config.ts(docusaurus.config.js)の'serverUrl'でカスタムURLを指定することも可能。
プロンプト本文
- docusaurusのテーマ「theme-mermaid」を参考にPlantUMLを表示するテーマを作って
- 仕様
- コードハイライトに `plantuml-diagram` か `pumld` とかかれたコードをPlantUMLでレンダリングした図に差し替える
- レンダリングはPlantUMLのサーバーを利用する
- ライトモード時: `https://www.plantuml.com/plantuml/svg/`
- ダークモード時: `https://www.plantuml.com/plantuml/dsvg/`
- docusaurus.config.ts(docusaurus.config.js)にパラメーター `serverUrl` でURLが書かれているときはそのURLでレンダリングする
- typescriptで作成する
- theme-mermaidのコード参照先
- https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-mermaid/src/theme/Mermaid
- 仕様
- コードハイライトに `plantuml-diagram` か `pumld` とかかれたコードをPlantUMLでレンダリングした図に差し替える
- レンダリングはPlantUMLのサーバーを利用する
- ライトモード時: `https://www.plantuml.com/plantuml/svg/`
- ダークモード時: `https://www.plantuml.com/plantuml/dsvg/`
- docusaurus.config.ts(docusaurus.config.js)にパラメーター `serverUrl` でURLが書かれているときはそのURLでレンダリングする
- typescriptで作成する
- theme-mermaidのコード参照先
- https://github.com/facebook/docusaurus/tree/main/packages/docusaurus-theme-mermaid/src/theme/Mermaid
©2025 生成AIプロンプト研究所「チャプロ」 All rights reserved.