Back to Tech landscape

Mermaid

Design & UX

Diagrams as code in Markdown

Official documentation (opens in a new tab)

Overview

Mermaid keeps user flows and architecture sketches in Git as text—ConnectSoft UX packs and MkDocs sites render the same diagrams without separate drawing tools.

Figma and documented tokens feed ConnectSoft Blazor UIKit and marketing surfaces—so spacing, themes, and components stay consistent across Factory templates and public sites.

When client brands differ, we still anchor specs in accessible patterns and component libraries that engineers can implement without guesswork.

Strong UX specs shorten delivery cycles— we connect design artifacts to Azure-hosted products your teams can evolve safely.

Why we use it:

  • Diagrams live beside Markdown specs in repo
  • MkDocs superfences or site pipeline renders Mermaid
  • Version diagrams with code reviews
  • Export to PNG only when stakeholders need slides
  • Single source of truth before implementation starts
  • Responsive, accessible specs for light and dark themes
  • Component libraries that map cleanly to Blazor and Angular

Ready to work with us?

Let's discuss how our team can help achieve your digital goals