Streamlining Diagram Management: A Key Software Development Productivity Tool Request for GitHub

Centralized diagram repository linking to multiple documents
Centralized diagram repository linking to multiple documents

Unlocking Documentation Efficiency: The Call for Referenced Mermaid Diagrams on GitHub

In the world of software development productivity tools, clear and up-to-date documentation is paramount. A recent discussion on GitHub’s Community forum highlights a significant gap in how diagrams are managed, impacting team efficiency and the integrity of technical documentation. The core issue? GitHub’s current inability to render Mermaid diagrams when they are referenced from a Markdown file, much like how image files (e.g., SVGs) are handled.

Currently, GitHub offers robust support for Mermaid diagrams in two primary ways:

  • Inline fenced blocks in Markdown files (issues, PRs, discussions, wikis):
    mermaid
    graph LR
        A --> B
    
  • Direct viewing of standalone .mermaid or .mmd files in blob view.

The Missing Link: Referencing Diagrams as a Single Source of Truth

The critical missing piece, as user sumau points out, is the inability to reference a .mmd file from a Markdown document using standard image syntax. While ![](./diagram.svg) renders an SVG inline, ![](./diagram.mmd) does not. This seemingly minor omission creates significant challenges for maintaining accurate and consistent documentation, hindering software development efficiency metrics.

The consequences are far-reaching:

  • Duplication and Drift: Diagrams needed across multiple documents (e.g., root READMEs, docs pages, sub-package READMEs) must be copy-pasted as fenced blocks. This inevitably leads to different versions of the "same" diagram, making updates a nightmare.
  • No Canonical Source: Organizations struggle to maintain a single, canonical architecture diagram that can be referenced across various service repositories. This forces teams to use clunky workarounds.
  • Inefficient Workarounds:
    • CI Compile Steps: Pre-rendering diagrams to SVG using tools like mermaid-cli and committing these images. This creates build artifacts that quickly become stale if the source .mmd file is updated without re-rendering.
    • Mermaid Live URLs: Encoding the diagram source into a mermaid.ink or Mermaid Live URL. While avoiding a build step, it moves the diagram out of the repository into an unreadable, base64-encoded blob within the URL, compromising version control and readability.

A Proposed Solution for Enhanced Productivity

The community proposes a straightforward and impactful solution: when Markdown image syntax targets a .mmd or .mermaid file, GitHub should render it as a Mermaid diagram. This would leverage existing rendering capabilities and image-resolution rules, introducing no new permission surface or security concerns.

The proposed behavior would support:

  1. Relative Paths (Same Repo):
    !Payment flow
    Resolved at the same reference as the Markdown file, respecting existing access controls.
  2. Absolute Raw URLs (Any Repo):
    !Shared architecture
    Fetched anonymously via GitHub's proxy, mirroring how cross-repo raw SVG URLs function today. This means public diagrams would render, private ones would not, maintaining consistent access semantics.

Pinning to a specific tag or commit SHA would also provide stable embeds, just as with images, further enhancing reliability and engineering statistics related to documentation accuracy.

Who Benefits?

This feature would be a "massive quality-of-life upgrade for docs," as user AhmadHassan-BTed noted. It directly addresses long-standing pain points for:

  • Organizations maintaining canonical system diagrams in a central documentation repository, referenced by numerous service repositories.
  • Monorepos where sub-package READMEs frequently share common system diagrams.
  • Teams with non-technical members who need to edit diagrams. A single .mmd file could be the source, editable in blob view, and rendered consistently wherever referenced.

Implementing this feature would significantly boost software development productivity tools available on GitHub, ensuring documentation remains accurate, maintainable, and a true single source of truth.

Developer viewing a referenced Mermaid diagram in a Markdown document
Developer viewing a referenced Mermaid diagram in a Markdown document

|

Dashboards, alerts, and review-ready summaries built on your GitHub activity.

 Install GitHub App to Start
Dashboard with engineering activity trends