Diagram Snippets
Collection of diagram templates for visualizing concepts, architectures, and workflows supported by this Hugo config. All diagram libraries are enabled by default in this template.
Snippets
- Architecture Diagrams (C4 Model)
Create system architecture diagrams using C4 model with Mermaid - Chart.js Bar Chart
Create bar charts for data visualization - Graphviz DOT Diagrams
Create complex graph layouts with Graphviz DOT language - KaTeX Math Examples and Tips
Comprehensive guide to KaTeX math notation with examples and tips - Mermaid Arbitrary Graphs
Create arbitrary graphs and networks with Mermaid - Mermaid Block Diagrams
Create block diagrams for system architecture with Mermaid - Mermaid Charts (Pie, Bar, Line)
Create pie charts, bar charts, and line charts with Mermaid - Mermaid Class Diagrams (UML)
Create UML class diagrams with Mermaid - Mermaid Entity Relationship Diagrams
Create Entity Relationship Diagrams (ERD) with Mermaid - Mermaid Flowchart
Create flowcharts and decision trees with Mermaid - Mermaid Gantt Chart
Create Gantt charts for project timelines and scheduling - Mermaid Git Diagrams
Create Git branch and commit diagrams with Mermaid - Mermaid Kanban Boards
Create Kanban boards for project management with Mermaid - Mermaid Mindmaps
Create mindmaps for brainstorming and organizing ideas with Mermaid - Mermaid Packet Diagrams
Create packet diagrams for network protocols with Mermaid - Mermaid Quadrant Charts
Create quadrant charts for prioritization with Mermaid - Mermaid Radar Charts
Create radar charts for multi-dimensional comparisons with Mermaid - Mermaid Requirement Diagrams
Create requirement diagrams for system requirements with Mermaid - Mermaid Sankey Diagrams
Create Sankey diagrams for flow visualization with Mermaid - Mermaid Sequence Diagram
Create sequence diagrams for interactions and API flows - Mermaid State Diagrams
Create state diagrams and state machines with Mermaid - Mermaid Timeline Diagrams
Create timeline diagrams for chronological events with Mermaid - Mermaid Treemap Diagrams
Create treemap diagrams for hierarchical data visualization with Mermaid - Mermaid User Journey Diagrams
Create user journey maps with Mermaid - Mermaid ZenUML Diagrams
Create ZenUML sequence diagrams with Mermaid - P5.js Interactive Visualizations
Create interactive visualizations and animations with P5.js