Use TechDocs Addon for Mermaid

.gitignore

@@ -49,3 +49,6 @@ site
 
 # E2E test reports
 e2e-test-report/
+
+# Local TechDocs
+packages/backend/techdocs/**

Dockerfile

@@ -71,9 +71,7 @@ ENV VIRTUAL_ENV=/opt/venv
 RUN python3 -m venv $VIRTUAL_ENV
 ENV PATH="$VIRTUAL_ENV/bin:$PATH"
 
-RUN pip3 install mkdocs-techdocs-core markdown-inline-mermaid
-
-RUN yarn global add @mermaid-js/mermaid-cli
+RUN pip3 install mkdocs-techdocs-core
 
 RUN curl -o plantuml.jar -L https://github.com/plantuml/plantuml/releases/download/v1.2023.10/plantuml-1.2023.10.jar && echo "527d28af080ae91a455e7023e1a726c7714dc98e plantuml.jar" | sha1sum -c - && mv plantuml.jar /opt/plantuml.jar
 RUN echo '#!/bin/sh\n\njava -jar '/opt/plantuml.jar' ${@}' >> /usr/local/bin/plantuml

knip.json

@@ -7,6 +7,7 @@
     "@testing-library/jest-dom",
     "webpack-env",
     "lint-staged",
-    "@types/lodash"
+    "@types/lodash",
+    "@types/d3"
   ]
 }

mkdocs.yml

@@ -2,6 +2,3 @@ site_name: 'Backstage Demo'
 
 plugins:
   - techdocs-core
-
-markdown_extensions:
-  - markdown_inline_mermaid

packages/app/package.json

@@ -33,10 +33,13 @@
     "@backstage/plugin-search-react": "^1.8.1-next.2",
     "@backstage/plugin-signals": "^0.0.11-next.2",
     "@backstage/plugin-techdocs": "^1.11.0-next.2",
+    "@backstage/plugin-techdocs-module-addons-contrib": "^1.1.16-next.2",
+    "@backstage/plugin-techdocs-react": "^1.2.9-next.2",
     "@backstage/plugin-user-settings": "^0.8.14-next.2",
     "@backstage/theme": "^0.6.0-next.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "backstage-plugin-techdocs-addon-mermaid": "^0.13.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",
@@ -47,6 +50,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",
+    "@types/d3": "^7.4.3",
     "@types/node": "^20.0.0",
     "@types/react-dom": "*",
     "@types/uuid": "^10.0.0",

packages/app/src/App.tsx

@@ -48,6 +48,14 @@ import { HomePage } from './components/home/HomePage';
 import { CustomizableHomePage } from './components/home/CustomizableHomePage';
 import { ScaffolderPage, scaffolderPlugin } from '@backstage/plugin-scaffolder';
 import { NotificationsPage } from '@backstage/plugin-notifications';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import {
+  ExpandableNavigation,
+  LightBox,
+  ReportIssue,
+  TextSize,
+} from '@backstage/plugin-techdocs-module-addons-contrib';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 import { SignalsDisplay } from '@backstage/plugin-signals';
 
 const app = createApp({
@@ -146,7 +154,16 @@ const routes = (
     <Route
       path="/docs/:namespace/:kind/:name/*"
       element={<TechDocsReaderPage />}
-    />
+    >
+      <TechDocsAddons>
+        <ExpandableNavigation />
+        <LightBox />
+        <ReportIssue />
+        <TextSize />
+        <Mermaid />
+      </TechDocsAddons>
+    </Route>
+    ;
     <Route path="/explore" element={<ExplorePage />} />
     <Route path="/graphiql" element={<GraphiQLPage />} />
     <Route path="/search" element={<SearchPage />}>

packages/app/src/components/catalog/EntityPage.tsx

@@ -64,6 +64,14 @@ import {
   EntityKubernetesContent,
   isKubernetesAvailable,
 } from '@backstage/plugin-kubernetes';
+import {
+  ExpandableNavigation,
+  LightBox,
+  ReportIssue,
+  TextSize,
+} from '@backstage/plugin-techdocs-module-addons-contrib';
+import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 
 const EntityLayoutWrapper = (props: { children?: React.ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
@@ -154,6 +162,18 @@ const cicdCard = (
   </EntitySwitch>
 );
 
+const techdocsContentWithAddons = (
+  <EntityTechdocsContent>
+    <TechDocsAddons>
+      <ExpandableNavigation />
+      <LightBox />
+      <ReportIssue />
+      <TextSize />
+      <Mermaid />
+    </TechDocsAddons>
+  </EntityTechdocsContent>
+);
+
 const overviewContent = (
   <Grid container spacing={3} alignItems="stretch">
     {entityWarningContent}
@@ -218,7 +238,7 @@ const serviceEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      {techdocsContentWithAddons}
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/todos" title="TODOs">
@@ -257,7 +277,7 @@ const websiteEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      {techdocsContentWithAddons}
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/todos" title="TODOs">
@@ -273,7 +293,7 @@ const defaultEntityPage = (
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/docs" title="Docs">
-      <EntityTechdocsContent />
+      {techdocsContentWithAddons}
     </EntityLayout.Route>
 
     <EntityLayout.Route path="/todos" title="TODOs">