Перейти до основного вмісту

Diagrams

This page demonstrates various diagram types supported through Kroki integration, including Mermaid, PlantUML, and other diagram formats.

Note: All diagrams now have theme-appropriate backgrounds that work with both light and dark modes.

Mermaid Diagrams​

Flowchart​

mermaid

Sequence Diagram​

mermaid

Gantt Chart​

mermaid

Class Diagram​

mermaid

PlantUML Diagrams​

Use Case Diagram​

plantuml

Component Diagram​

plantuml

Activity Diagram​

plantuml

GraphViz (DOT) Diagrams​

dot

BlockDiag​

blockdiag

SeqDiag​

seqdiag

Theme Support​

The diagrams now feature:

  • PlantUML & GraphViz: Built-in light gray backgrounds (#f8f9fa) generated within the diagrams
  • Other diagrams: CSS-applied backgrounds that adapt to light/dark themes
  • Zoom functionality - click any diagram to zoom in!
  • Hover effects with subtle scaling and shadow changes
  • Consistent styling across all diagram types

Try this:

  1. Hover over any diagram - see the subtle scale effect
  2. Click to zoom - all diagrams are fully zoomable
  3. Notice PlantUML/GraphViz - have built-in light gray backgrounds
  4. Other diagrams - get CSS backgrounds that adapt to theme
  5. ESC or click outside to close zoom