Diagram Examples

This document demonstrates how to use PlantUML and Mermaid diagrams in your markdown content.

PlantUML Sequence Diagram

The following diagram shows the user interaction flow:

This diagram illustrates how a user navigates through the system, from the web browser to the Astro site, and how content is loaded and rendered.

Mermaid Flowchart

The build process workflow is shown in this flowchart:

This flowchart demonstrates the complete build pipeline, from content preparation through deployment.

Using Diagrams in Your Content

You can reference diagram source files directly in your markdown:

![Diagram Description](/lti/standards/assets/diagram-file.png)
![Another Diagram](/lti/standards/assets/flowchart.png)

During the build process:

1. Diagram source files (.puml, .mmd, .mermaid) are automatically converted to PNG images
2. Markdown references are updated to point to the generated .png files
3. Images are copied to the public folder for serving

Best Practices

• Keep diagram source files alongside your markdown content
• Use descriptive filenames for your diagrams
• Reference diagrams using relative paths
• Edit the source files (.puml, .mmd) rather than the generated images