Visualizations Demo: Mermaid and Charts
This post demonstrates how to use Mermaid diagrams and Chart.js visualizations in Hugo.
Mermaid Diagram Example
Here’s a simple flowchart using Mermaid:
graph TD
A[Start] --> B{Is Data Valid?}
B -->|Yes| C[Process Data]
B -->|No| D[Show Error]
C --> E[Generate Chart]
D --> F[End]
E --> F
Sequence Diagram
sequenceDiagram
participant User
participant API
participant Database
User->>API: Request Data
API->>Database: Query
Database-->>API: Return Results
API-->>User: JSON Response
Chart.js Line Chart
Here’s a line chart showing monthly sales:
Bar Chart
A bar chart comparing different categories:
Pie Chart
A pie chart showing distribution:
Complex Mermaid Diagram
A more complex workflow:
graph LR
A[Data Source] --> B[ETL Process]
B --> C[Data Warehouse]
C --> D[Analytics]
C --> E[Reporting]
D --> F[Dashboard]
E --> F
F --> G[Users]
style A fill:#f9f,stroke:#333,stroke-width:2px
style G fill:#bbf,stroke:#333,stroke-width:2px
These examples show how you can combine Mermaid diagrams for workflows and Chart.js for data visualizations in your Hugo blog posts!