Quadrant Charts

Learn to use quadrant charts in Mermaid to classify data and identify trends across four quadrants with customizable axes and points.

What are Quadrant Charts?

Mermaid's Quadrant charts are a visual tool used to plot data points across two dimensions, divided into four quadrants. They help in analyzing data patterns and trends, and are widely used in business, marketing, and strategic decision-making. Each quadrant represents a distinct area of analysis, often defined by specific criteria relevant to the dataset.

Creating Your First Quadrant Chart

1. Launch DinoAI: From Code IDE, access DinoAI to start creating diagrams.

2. Use a Simple Prompt: Tell DinoAI what kind of Quadrant Chart you want to create. For example:

- "Create a mermaid quadrant chart analyzing data project priority vs. effort for my roadmap"

- "Generate a mermaid quadrant chart for data quality assessment with accuracy vs. completeness"

- "Build a mermaid quadrant chart showing data source evaluation with reliability vs. business value"

1. Get Your Diagram: DinoAI will generate a complete .mmd file with proper Mermaid syntax.

2. Preview Your Work: Click the eye icon (👁️) to preview your diagram in real-time as you edit.

3. Iterate and Refine: Modify the generated .mmd file directly, or ask DinoAI to make specific changes.

Example:

Reusable Quadrant Chart prompts for you and your team

You can create custom, standardized .dinoprompts for Mermaid's Quadrant Charts that ensure consistency across your data team. See step-by-step guide.

---

Diagram Syntax Guide

Basic Syntax

• Title: Describes the chart and appears at the top.
• Axes: Label the x-axis and y-axis using descriptive text.
• Quadrants: Assign text to each quadrant for categorization.
• Points: Plot data points with values between 0 and 1 for both x and y.

Customizations

• Add color, size, and styling to points:
• Use classes for consistent styling:

Data Team Examples

Marketing Campaign Analysis

Task Prioritization

Best Practices

1. Use descriptive labels for quadrants and axes.

2. Plot only relevant data points to maintain clarity.

3. Add color coding or size variation for additional dimensions.

4. Keep quadrants evenly spaced and clearly labeled.

5. Adjust chart dimensions and styling as needed for readability.

---

Additional Resources

For more syntax options and advanced features, visit the official Mermaid documentation.