Run Mermaid Live Editor inside Home Assistant

Share your Projects!
, ,
1

Hey everyone,

I use Mermaid diagrams a lot for documenting automations, flows, system ideas, and quick architecture sketches. I wanted a clean way to open a Mermaid editor directly from Home Assistant without depending on a hosted editor every time, so I packaged the official Mermaid Live Editor as a Home Assistant App.

This means you get the familiar Mermaid Live Editor experience but wrapped in the normal Home Assistant App model with ingress support and optional direct port access.

Add Repository

GitHub: SankeerthBoddu/ha-mermaid-live

What it is

This App packages the official Mermaid Live Editor into a Home Assistant app.

So instead of maintaining a separate custom editor, the app reuses the real upstream Mermaid editor and makes it available locally through Home Assistant.

What you get

  • Official Mermaid Live Editor UI
  • Live diagram editing and preview
  • Home Assistant ingress support
  • Optional direct access on port 3000
  • Browser-local history and persistence from the upstream editor
  • Simple single-service add-on, no extra networking model

How it works

The app image wraps the official Mermaid Live Editor build and serves it locally inside Home Assistant.

That means the Home Assistant side stays pretty small:

  • standard app metadata
  • standard app container build
  • local nginx service on port 3000
  • ingress support from Home Assistant

The actual editor itself is the upstream Mermaid Live Editor project.

How to set it up

  1. Click the Add Repository badge above, or manually add https://github.com/sankeerthboddu/ha-mermaid-live to your Home Assistant app store.

  2. Install Mermaid Live.

  3. Start the App.

  4. Open it from the app page or through the Home Assistant sidebar/ingress entry.

  5. If you want, expose the optional direct port 3000/tcp as well.

A quick note on storage and privacy

The core editor experience runs locally in your app container and browser. Diagram state and history are primarily handled in the browser by the upstream editor. Because this is the official upstream Mermaid Live Editor, some convenience links or optional integrations in that UI may still point to Mermaid ecosystem services. The main editing experience itself does not require a separate hosted editor.

Supported architectures

  • amd64
  • aarch64
1 Like
2

Continuing to refer to Add-ons in a new offering months after the name has been change is bound to confuse users and will cause you more support inquirys than needed.
Perhaps you should review this document to fix these issues. (T didn’t look in the Git Repo, but lots od bad references in here alone)
It is almost like you had an LLM write this and it doesn’t know that Add-ons no longer exist.

1 Like
3

Thanks for the heads up, @Sir_Goodenough! Appreciate you flagging this — the “Add-on” to “Apps” rename that came out in the 2026.2 release. I’ll go through the post and clean up those references. Good to keep things current for new users.