@keadex/docusaurus-plugin-mina v1.11.0

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>