Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
Updated installation instructions to make it a bit more clear which steps need to be taken
  • Loading branch information
michaelfeinbier authored Feb 15, 2023
1 parent f7e50cc commit 17df058
Showing 1 changed file with 17 additions and 12 deletions.
29 changes: 17 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,23 @@ Backstage v1.2+

## Getting started

Follow [the official documentation for TechDocs Addons](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons) to use this addon.

```typescript jsx
import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';

// ...
{techDocsPage}
<TechDocsAddons>
{/*...*/}
<Mermaid config={{ theme: 'forest', themeVariables: { lineColor: '#000000' } }} />
</TechDocsAddons>
```
1. Follow [the official documentation for TechDocs Addons](https://backstage.io/docs/features/techdocs/addons#installing-and-using-addons) to enable addons for techdocs.
2. Install this plugin in your backstage app. Run the following command from the root of your backstage installation:
```
yarn add --cwd packages/app backstage-plugin-techdocs-addon-mermaid
```
3. Enable the addon in your application
```typescript jsx
// packages/app/src/App.tsx
import { Mermaid } from 'backstage-plugin-techdocs-addon-mermaid';

// ...
{techDocsPage}
<TechDocsAddons>
{/*...*/}
<Mermaid config={{ theme: 'forest', themeVariables: { lineColor: '#000000' } }} />
</TechDocsAddons>
```

## Use Mermaid in your TechDocs

Expand Down

0 comments on commit 17df058

Please sign in to comment.