← All diagram types
MERMAID DIAGRAM GUIDE

Mermaid bar chart online editor

Compare discrete values across categories with vertical bars. Create the diagram in Mermaid Studio, preview it instantly, and export it when it is ready to share.

Open the Bar Chart editor See an example

WHAT IT IS FOR

Make the important relationships clear

Compare discrete categories with a straightforward bar chart that fits naturally into technical documentation and reports.

  • Compare feature usage
  • Summarize category metrics
  • Present a small set of business or engineering values
Why use Mermaid Studio?
  • Write the source as versionable Mermaid code.
  • Preview changes immediately in the browser.
  • Export the finished diagram as SVG or PNG.
  • Start from a related template when you need a head start.

MERMAID EXAMPLE

Start with a working example

Copy the structure, replace the labels with your own domain, and continue in the full editor.

xychart-beta
  title "Monthly signups"
  x-axis [1Month, 2Month, 3Month, 4Month]
  y-axis "Signups" 0 --> 100
  bar [20, 35, 58, 82]

HOW TO START

Create your diagram in four steps

  1. 1Name each category clearly.
  2. 2Use one consistent unit across values.
  3. 3Choose a scale that supports honest comparison.
  4. 4Call out the most important difference in nearby text.

WRITING TIPS

Keep the diagram useful

Start the axis at zero for honest comparisons.

Sort categories when order helps the reader.

FAQ

Frequently asked questions

What is a bar chart best for?+

Bar charts are best for comparing separate categories where the difference between values should be immediately visible.

Should a bar chart axis start at zero?+

Usually yes, especially when bar length is used to compare magnitude directly.

TEMPLATES

Start from a related template

Monthly revenue bar chart

Compare monthly revenue with a clear category chart.

Open template

RELATED DIAGRAMS

Explore another Mermaid diagram

Mermaid flowchart

Visualize processes, decisions, and system flows with connected nodes.

Read the guide

Mermaid sequence diagram

Map requests, responses, and asynchronous events between services.

Read the guide

Mermaid class diagram

Design domain objects, properties, methods, inheritance, and relationships.

Read the guide

Mermaid ER diagram

Document database entities, fields, relationships, and cardinality.

Read the guide

Mermaid state diagram

Show how an object or workflow changes state in response to events.

Read the guide

Mermaid mindmap

Organize ideas and subtopics hierarchically around a central theme.

Read the guide

Ready to make a Bar Chart?

Open the editor with a working example and adapt it to your project.

Start in Mermaid Studio