Adding support for pan and zoom on diagrams

[aztechead]

Closes #45

This PR adds the following

1. Bumps the mermaid dependency to the latest version
2. Adds support for pan and zoom within diagrams.

Description
Out of the box this plugin provides great utility for rendering mermaid diagrams. As those diagrams increase in complexity, they become difficult to read, especially on small screens. Issue #45 has been open for a while and I personally tried a few approaches that didnt work until this PR.

This works by leveraging the d3 pan/zoom library and wrapping the svg on the fly with one we can control. I tried to document heavily since this does add a new set of functionality.

Features

• Support for Zoom while holding ctrl or cmd.
• Support for Pan while holding ctrl or cmd.
• Support for defining upper and lower bounds for zoom and pan limits.

Example Usage

// In packages/app/src/components/catalog/EntityPage.tsx
import { Mermaid } from "backstage-plugin-techdocs-addon-mermaid";

const techdocsContent = (
  <EntityTechdocsContent>
    <TechDocsAddons>
      <Mermaid 
        enableZoom={true}
        zoomOptions={{
          scaleExtent: [0.1, 10], // Allow zooming from 10% to 1000%
          translateExtent: [[-1000, -1000], [1000, 1000]], // Limit panning area
          enableDoubleClickZoom: true // Enable double-click to zoom to fit
        }}
      />
      <ReportIssue />
    </TechDocsAddons>
  </EntityTechdocsContent>
);

Example

[aztechead]

@johanneswuerbach I'm a bit stumped why the CI steps are failing with the yarn install --frozen-lockfile running that locally on a clean branch doesn't net the error. I'm not a yarn expert by any means, what am I missing? 😄

NVM: Figured it was my version of node that was messing it up, and it was. Builds both pass now.

[johanneswuerbach]

Thank you, this is great 👏 .

Published as [email protected]