Merge pull request #1297 from awanlin/topic/more-mermaid

Add back Mermaid and add ore examples

Author: awanlin

docs/examples/mermaid-github.md

@@ -14,4 +14,5 @@ Current examples:
 - [iframe](./examples/iframe.md): this shows how you can use an iframe in your TechDocs
 - [Lists](./examples/lists.md): this showcases how to setup your lists in TechDocs
 - [Mermaid](./examples/mermaid.md): this showcases how to use Mermaid diagrams in your TechDocs
+- [Mermaid GitHub](./examples/mermaid-github.md): this showcases how to use Mermaid diagrams supported by GitHub in your TechDocs
 - [PlantUML](./examples/plantuml.md): this showcases how to use PlantUML diagrams in your TechDocs

docs/index.md

@@ -43,6 +43,7 @@
     "@backstage/ui": "backstage:^",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "backstage-plugin-techdocs-addon-mermaid": "^0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",

packages/app-migrated/package.json

@@ -56,9 +56,7 @@ import {
   ReportIssue,
   TextSize,
 } from '@backstage/plugin-techdocs-module-addons-contrib';
-// TODO:(awanlin) enabled once TypeScript errors are resolved
-// https://github.com/johanneswuerbach/backstage-plugin-techdocs-addon-mermaid/issues/78
-// import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 import { SignalsDisplay } from '@backstage/plugin-signals';
 import { NotificationSettings } from './components/settings/NotificationSettings';
 
@@ -129,6 +127,7 @@ const routes = (
         <LightBox />
         <ReportIssue />
         <TextSize />
+        <Mermaid />
       </TechDocsAddons>
     </Route>
 

packages/app-migrated/src/App.tsx

@@ -71,9 +71,7 @@ import {
   TextSize,
 } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-// TODO:(awanlin) enabled once TypeScript errors are resolved
-// https://github.com/johanneswuerbach/backstage-plugin-techdocs-addon-mermaid/issues/78
-// import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 
 const EntityLayoutWrapper = (props: { children?: React.ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
@@ -171,6 +169,7 @@ const techdocsContentWithAddons = (
       <LightBox />
       <ReportIssue />
       <TextSize />
+      <Mermaid />
     </TechDocsAddons>
   </EntityTechdocsContent>
 );

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

@@ -40,6 +40,7 @@
     "@backstage/ui": "backstage:^",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "backstage-plugin-techdocs-addon-mermaid": "^0.25.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router": "^6.3.0",

packages/app/package.json

@@ -57,9 +57,7 @@ import {
   ReportIssue,
   TextSize,
 } from '@backstage/plugin-techdocs-module-addons-contrib';
-// TODO:(awanlin) enabled once TypeScript errors are resolved
-// https://github.com/johanneswuerbach/backstage-plugin-techdocs-addon-mermaid/issues/78
-// import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 import { SignalsDisplay } from '@backstage/plugin-signals';
 import { NotificationSettings } from './components/settings/NotificationSettings';
 import {
@@ -186,6 +184,7 @@ const routes = (
         <LightBox />
         <ReportIssue />
         <TextSize />
+        <Mermaid />
       </TechDocsAddons>
     </Route>
     ;

packages/app/src/App.tsx

@@ -71,9 +71,7 @@ import {
   TextSize,
 } from '@backstage/plugin-techdocs-module-addons-contrib';
 import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
-// TODO:(awanlin) enabled once TypeScript errors are resolved
-// https://github.com/johanneswuerbach/backstage-plugin-techdocs-addon-mermaid/issues/78
-// import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
+import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';
 
 const EntityLayoutWrapper = (props: { children?: React.ReactNode }) => {
   const [badgesDialogOpen, setBadgesDialogOpen] = useState(false);
@@ -171,6 +169,7 @@ const techdocsContentWithAddons = (
       <LightBox />
       <ReportIssue />
       <TextSize />
+      <Mermaid />
     </TechDocsAddons>
   </EntityTechdocsContent>
 );