feat(mermaidViz): add mermaid component

Author: lyjeileen

src/components/index.ts

@@ -23,6 +23,7 @@ import Text from './text/text'
 import Timestamp from './timestamp/timestamp'
 import YoutubeVideo from './video/youtubeVideo'
 import RechartsTimeSeries from './visualization/chart/rechartsTimeSeries'
+import MermaidViz from './visualization/mermaidViz/mermaidViz'
 import VegaLiteViz from './visualization/vegaLiteViz/vegaLiteViz'
 
 export {
@@ -34,6 +35,7 @@ export {
   Image,
   MarkedMarkdown,
   MarkedStreamingMarkdown,
+  MermaidViz,
   MessageCanvas,
   MessageSpace,
   MultimodalInput,

src/components/types.ts

@@ -1,3 +1,4 @@
+import type { MermaidConfig } from 'mermaid'
 import type { Renderers } from 'vega'
 import type { EmbedOptions, VisualizationSpec } from 'vega-embed'
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -157,6 +158,15 @@ export interface VegaLiteFormat extends DataFormat {
 
 export type VegaLiteData = VegaLiteFormat & Updates<VegaLiteFormat>
 
+export interface MermaidFormat extends DataFormat {
+  /** Follow mermaid's [documentation](https://mermaid.js.org/intro/) to provide a code string.  */
+  code: string
+  /** Follow mermaid's [documentation](https://mermaid.js.org/config/setup/README.html) to provide a config object. It's used for additional customizations. */
+  config?: MermaidConfig
+}
+
+export type MermaidData = MermaidFormat & Updates<MermaidFormat>
+
 export interface MediaFormat extends DataFormat {
   /** URL of the media file to be played. */
   src: string

src/components/visualization/mermaidViz/mermaidViz.css

@@ -0,0 +1,16 @@
+.rustic-mermaid-container {
+  height: 100%;
+  width: 100%;
+}
+
+.rustic-mermaid-container div:last-of-type {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.rustic-mermaid-container div:last-of-type svg {
+  height: 100%;
+  width: 100%;
+}

src/components/visualization/mermaidViz/mermaidViz.cy.tsx

@@ -0,0 +1,30 @@
+import { supportedViewports } from '../../../../cypress/support/variables'
+import MermaidViz from './mermaidViz'
+
+describe('MermaidViz', () => {
+  const codeExample = `
+    flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]`
+  const mermaidContainer = '[data-cy="mermaid-container"]'
+
+  supportedViewports.forEach((viewport) => {
+    it(`should display the diagram on ${viewport} screen`, () => {
+      cy.viewport(viewport)
+      cy.mount(
+        <MermaidViz
+          code={codeExample}
+          title="Christmas Shopping"
+          description="A flow chart"
+        />
+      )
+
+      cy.get(mermaidContainer).should('exist')
+      cy.get(mermaidContainer).contains('Christmas Shopping')
+      cy.get(mermaidContainer).contains('A flow chart')
+    })
+  })
+})

src/components/visualization/mermaidViz/mermaidViz.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import MermaidViz from './mermaidViz'
+
+const meta: Meta<React.ComponentProps<typeof MermaidViz>> = {
+  title: 'Rustic UI/Visualization/MermaidViz',
+  component: MermaidViz,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+meta.argTypes = {
+  ...meta.argTypes,
+}
+
+const decorators = [
+  (Story: StoryFn) => {
+    return (
+      <div
+        style={{
+          width: 'clamp(250px, 70vw, 1000px)',
+        }}
+      >
+        <Story />
+      </div>
+    )
+  },
+]
+
+export const classDiagram = {
+  args: {
+    code: `classDiagram
+    Animal <|-- Duck
+    Animal <|-- Fish
+    Animal <|-- Zebra
+    Animal : +int age
+    Animal : +String gender
+    Animal: +isMammal()
+    Animal: +mate()
+    class Duck{
+      +String beakColor
+      +swim()
+      +quack()
+    }
+    class Fish{
+      -int sizeInFeet
+      -canEat()
+    }
+    class Zebra{
+      +bool is_wild
+      +run()
+    }`,
+  },
+  decorators,
+}
+
+export const Flow = {
+  args: {
+    code: `
+    flowchart TD
+    A[Christmas] -->|Get money| B(Go shopping)
+    B --> C{Let me think}
+    C -->|One| D[Laptop]
+    C -->|Two| E[iPhone]
+    C -->|Three| F[fa:fa-car Car]`,
+  },
+  decorators,
+}
+
+export const ERDiagram = {
+  args: {
+    title: 'Customer Order Management System ER Diagram',
+    description:
+      'This ER diagram illustrates the relationships in an ordering system where a customer has a delivery address, places orders, and is liable for invoices; delivery addresses receive orders, invoices cover orders, orders include order items, product categories contain products, and products are ordered in order items.',
+    code: `
+      erDiagram
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : has
+    CUSTOMER ||--o{ ORDER : places
+    CUSTOMER ||--o{ INVOICE : "liable for"
+    DELIVERY-ADDRESS ||--o{ ORDER : receives
+    INVOICE ||--|{ ORDER : covers
+    ORDER ||--|{ ORDER-ITEM : includes
+    PRODUCT-CATEGORY ||--|{ PRODUCT : contains
+    PRODUCT ||--o{ ORDER-ITEM : "ordered in"`,
+  },
+  decorators,
+}
+
+export const error = {
+  args: {
+    code: '',
+  },
+  decorators,
+}

src/components/visualization/mermaidViz/mermaidViz.tsx

@@ -0,0 +1,58 @@
+import './mermaidViz.css'
+
+import Stack from '@mui/material/Stack'
+import Typography from '@mui/material/Typography'
+import useTheme from '@mui/system/useTheme'
+import mermaid from 'mermaid'
+import React, { useEffect, useRef } from 'react'
+
+import type { MermaidData } from '../../types'
+
+/** The `MermaidViz` component leverages [Mermaid.js](https://mermaid.js.org/) to create dynamic and interactive diagrams, including flowcharts, sequence diagrams, class diagrams, and more. It is ideal for visualizing complex data and processes in a clear and structured manner. */
+function MermaidViz(props: MermaidData) {
+  const chartRef = useRef(null)
+  const rusticTheme = useTheme()
+  const isDarkTheme = rusticTheme.palette.mode === 'dark'
+
+  useEffect(() => {
+    if (chartRef.current) {
+      mermaid.initialize({
+        theme: 'base',
+        themeVariables: {
+          primaryColor: rusticTheme.palette.primary.main,
+          primaryTextColor: rusticTheme.palette.background.paper,
+          primaryBorderColor: rusticTheme.palette.divider,
+          lineColor: rusticTheme.palette.divider,
+          secondaryColor: rusticTheme.palette.secondary.main,
+          background: rusticTheme.palette.background.paper,
+          errorTextColor: rusticTheme.palette.error.main,
+          errorBkgColor: rusticTheme.palette.error.main,
+          fontFamily: 'Inter',
+        },
+        ...props.config,
+      })
+
+      mermaid.contentLoaded()
+    }
+  }, [isDarkTheme])
+
+  return (
+    <Stack
+      direction="column"
+      className="rustic-mermaid-container"
+      data-cy="mermaid-container"
+    >
+      {props.title && (
+        <Typography variant="subtitle2">{props.title}</Typography>
+      )}
+      {props.description && (
+        <Typography variant="caption">{props.description}</Typography>
+      )}
+      <div ref={chartRef} className="mermaid">
+        {props.code}
+      </div>
+    </Stack>
+  )
+}
+
+export default MermaidViz