Installation / インストール

1. Clone the repository:

Terminal window
git clone https://github.com/aqz-saito/astro.aqz.jp.git

2. Copy the component to your project:

components/
└── PlantUML.astro

3. Install dependencies:

Terminal window
npm install plantuml-encoder @types/plantuml-encoder

4. Import and use:

import PlantUML from '@/components/PlantUML.astro';
code View source on GitHub

code Usage / 使い方 

---
import PlantUML from "../components/PlantUML.astro";
---


<PlantUML
  diagram="
@startuml
Alice -> Bob: Hello
@enduml
  "
/>

preview Examples / 使用例

Sequence Diagram / シーケンス図

PlantUML diagram

Component Diagram / コンポーネント図

PlantUML diagram

settings Props / プロパティ

Name Type Default Description
diagram string Required PlantUML diagram text
PlantUML図の定義テキスト
className string "w-full max-w-4xl mx-auto" CSS classes for the img element
img要素のCSSクラス

info Notes / 注意事項

  • Requires internet connection (uses public PlantUML server)
    インターネット接続が必要です（公開PlantUMLサーバーを使用）
  • SVG output for crisp rendering
    SVG出力でクリアな描画を実現
  • Simple API with TypeScript support
    TypeScriptサポート付きのシンプルなAPI