What is the easiest way I can add diagrams to my Astro w/ Starlight site?
#Add Diagrams to Site
topaz galleon
oak reefBOT
Hi @topaz galleon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The easiest way to add diagrams to your Astro site with Starlight is to use a community integration or plugin that supports diagram rendering in Markdown.
For PlantUML diagrams, you can use the astro-plantuml integration, which automatically converts PlantUML code blocks in Markdown to diagrams. This integration is available for Astro and can be used in Starlight sites as well. You can find it here: astro-plantuml — it supports sequence, class, activity, state diagrams, and more.
To use it, install the package in your project:
npm install astro-plantuml
Then, follow the integration instructions to enable it in your Astro configuration.
Additionally, the Starlight plugins and integrations page lists astro-plantuml as a community tool for rendering PlantUML content in Markdown code blocks, making it a straightforward choice for diagram support in Starlight documentation sites Community tools and integrations.
If you need other diagram types (like Mermaid or D2), there are also Astro integrations such as astro-diagram for Mermaid and astro-d2 for D2 diagrams, which can be added similarly.
In summary:
- For PlantUML: Use astro-plantuml
- For Mermaid: Use astro-diagram
- For D2: Use astro-d2
These integrations are the easiest way to add diagrams to your Astro w/ Starlight site.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
topaz galleon
@oak reef Can you giveme detailed guidance on how to use astro-d2?
oak reefBOT
Let me check the knowledge base for you again. One moment! :books:
I'm sorry, but the knowledge sources provided do not contain detailed instructions or guidance on how to use the astro-d2 integration with Astro or Starlight. While astro-d2 is mentioned as an available integration for transforming D2 Markdown code blocks into diagrams, there are no step-by-step setup or usage details included in the sources above Integrations.