Quick Overview

This Docusaurus plugin injects Webpack configurations to include into Docusaurus pages interactive C4 Model diagrams created with Keadex Mina through the Mina React component.

Usage

Install

yarn add @keadex/docusaurus-plugin-mina # or npm install @keadex/docusaurus-plugin-mina
yarn add @keadex/mina-react # or npm install @keadex/mina-react

Add the plugin

docusaurus.config.js

const config = {
  // your Docusaurus config
  plugins: ['@keadex/docusaurus-plugin-mina']
}

export default config

Import the Mina React CSS

src\css\custom.css

/* Other CSS rules */
@import "@keadex/mina-react/main.css";

Include the diagram into MDX files

[!WARNING]
The MinaReact component does not support SSR. Therefore, ensure that it is rendered only on the client side.

my-mina-diagram.mdx

---
sidebar_position: 1
---

# My Mina Diagram

import BrowserOnly from '@docusaurus/BrowserOnly';

<div style={{height: '50rem'}}>
  <BrowserOnly fallback={<div>Loading...</div>}>
    {() => {
      const MinaReact = require('@keadex/mina-react').default;
      return <MinaReact
          projectRootUrl="https://raw.githubusercontent.com/keadex/keadex/main/examples/mina-react-example/demo_mina_project/Mina%20Demo"
          diagramUrl="https://raw.githubusercontent.com/keadex/keadex/main/examples/mina-react-example/demo_mina_project/Mina%20Demo/diagrams/system-context/demo-diagram"
        />;
    }}
  </BrowserOnly>
</div>