Merge pull request #100 from bcgov/feature/DEVX-894-mermaid-add-on

Adding mermaid add-on.

packages/app/package.json

@@ -14,6 +14,8 @@
     "lint": "backstage-cli package lint"
   },
   "dependencies": {
+    "@app/plugin-expandable-toc": "0.0.0",
+    "@app/plugin-toc-fix2": "0.0.0",
     "@backstage/app-defaults": "^1.4.5",
     "@backstage/catalog-model": "^1.4.3",
     "@backstage/cli": "^0.24.0",
@@ -43,14 +45,13 @@
     "@backstage/theme": "^0.4.4",
     "@bcgov/bc-sans": "^2.0.0",
     "@internal/plugin-analytics-module-snowplow": "^0.1.0",
-    "@app/plugin-toc-fix2": "0.0.0",
     "@material-ui/core": "^4.12.4",
     "@material-ui/icons": "^4.11.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@material-ui/styles": "^4.11.5",
     "@snowplow/browser-plugin-link-click-tracking": "^3.15.0",
     "@snowplow/browser-tracker": "^3.15.0",
-    "@app/plugin-expandable-toc": "0.0.0",
+    "backstage-plugin-techdocs-addon-mermaid": "^0.11.0",
     "history": "^5.0.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/app/src/App.tsx

@@ -42,6 +42,7 @@ import {HomepageCompositionRoot} from '@backstage/plugin-home';
 import HomePage from './components/home/HomePage';
 import { TocFix } from '@app/plugin-toc-fix2';
 import { TechdocExpandableToc } from '@app/plugin-expandable-toc';
+import {Mermaid} from "backstage-plugin-techdocs-addon-mermaid";
 
 const app = createApp({
 	apis,
@@ -120,6 +121,7 @@ const routes = (
 				<TocFix/>
 				<ExpandableNavigation />
 				<TechdocExpandableToc />
+				<Mermaid config={{ theme: 'forest', themeVariables: { lineColor: '#000000' } }} />
 			</TechDocsAddons>
 		</Route>
 		<Route path="/create" element={<ScaffolderPage/>}/>