How CodeWiki Processes Mermaid Diagram Click Events: A Deep Dive into the React Implementation

CodeWiki handles Mermaid diagram clicks by conditionally attaching an onClick handler to the rendered SVG that toggles a fullscreen state, displaying the diagram in a modal overlay when zoom-pan mode is disabled.

The quangdungluong/codewiki repository implements an interactive documentation experience where Mermaid diagrams respond to user interactions. Understanding how CodeWiki processes mermaid diagram click events requires examining the React component architecture that manages state, event handlers, and conditional rendering based on zoom configuration.

The Click Event Architecture in Mermaid.tsx

All click handling logic resides in frontend/components/Mermaid.tsx, the core React component responsible for rendering Mermaid diagrams to SVG and managing user interactions.

State Management for Fullscreen Mode

The component uses React's useState hook to track whether the diagram is currently displayed in fullscreen mode:

const [isFullscreen, setIsFullscreen] = useState(false);

This boolean state defaults to false and serves as the trigger for conditionally rendering the FullScreenModal component.

The handleDiagramClick Function

The actual click handler is defined as a memoized callback that validates diagram state before triggering the fullscreen transition:

const handleDiagramClick = () => {
  if (!error && svg) {
    setIsFullscreen(true);
  }
};

This function ensures that fullscreen mode only activates when the Mermaid diagram rendered successfully without errors and the SVG content is available.

Conditional Click Handling Based on Zoom State

CodeWiki implements a sophisticated interaction model where click behavior changes based on the zoomingEnabled configuration flag.

When zoom-pan mode is disabled, the component attaches the click handler directly to the SVG container:

<div
  className='flex justify-center …'
  dangerouslySetInnerHTML={{ __html: svg }}
  onClick={zoomingEnabled ? undefined : handleDiagramClick}
  title={zoomingEnabled ? undefined : 'Click to view fullscreen'}
/>

Conversely, when zoomingEnabled is true, the component utilizes the external svg-pan-zoom library for navigation, disabling the click-to-fullscreen feature to prevent interaction conflicts. The onClick prop becomes undefined, and the cursor hint disappears.

Implementing the Fullscreen Modal Experience

Once a valid click triggers setIsFullscreen(true), CodeWiki renders the diagram in an immersive overlay using the FullScreenModal component.

Rendering the FullScreenModal Component

The modal is conditionally rendered only when zooming is disabled and the fullscreen state is active:

{!zoomingEnabled && (
  <FullScreenModal
    isOpen={isFullscreen}
    onClose={() => setIsFullscreen(false)}
  >
    <div dangerouslySetInnerHTML={{ __html: svg }} />
  </FullScreenModal>
)}

This implementation passes the same SVG content into the modal while providing a callback to reset the fullscreen state when closing.

Modal Interaction Handlers

The FullScreenModal component (defined within Mermaid.tsx) registers comprehensive event listeners for user experience optimization:

• Escape key handling: Closes the modal when users press the Escape key
• Outside click detection: Dismisses the overlay when clicking outside the diagram content
• Zoom reset functionality: Provides a dedicated control to reset zoom levels within the fullscreen view

These handlers ensure that the fullscreen diagram view behaves like a native application modal while maintaining accessibility standards.

Complete Code Implementation Example

Below is a consolidated excerpt demonstrating the core click handling flow within the Mermaid component:

import React, { useState } from 'react';

// State declaration
const [isFullscreen, setIsFullscreen] = useState(false);
const [svg, setSvg] = useState<string>('');
const [error, setError] = useState<Error | null>(null);
const zoomingEnabled = false; // Configuration flag

// Click handler (opens fullscreen)
const handleDiagramClick = () => {
  if (!error && svg) {
    setIsFullscreen(true);
  }
};

// Diagram container – click only when zoom is disabled
<div
  className="w-full max-w-full"
  dangerouslySetInnerHTML={{ __html: svg }}
  onClick={zoomingEnabled ? undefined : handleDiagramClick}
  title={zoomingEnabled ? undefined : 'Click to view fullscreen'}
/>

// Full‑screen modal (shown when isFullscreen is true)
{!zoomingEnabled && (
  <FullScreenModal
    isOpen={isFullscreen}
    onClose={() => setIsFullscreen(false)}
  >
    <div dangerouslySetInnerHTML={{ __html: svg }} />
  </FullScreenModal>
)}

Summary

CodeWiki processes Mermaid diagram click events through a React-based state management system that prioritizes user experience and configuration flexibility:

• Primary handler: The handleDiagramClick function in frontend/components/Mermaid.tsx validates successful SVG rendering before activating fullscreen mode
• Conditional binding: Click events attach only when zoomingEnabled is false, preventing conflicts with svg-pan-zoom navigation controls
• State-driven UI: The isFullscreen boolean triggers the FullScreenModal component, which renders the same SVG content in an immersive overlay
• Accessibility features: The modal implements Escape key dismissal, outside-click closing, and zoom reset controls for complete keyboard and mouse navigation

Frequently Asked Questions

What triggers the fullscreen mode in CodeWiki's Mermaid diagrams?

Fullscreen mode triggers when a user clicks on a successfully rendered Mermaid diagram SVG, provided that zoom-pan mode is disabled. The handleDiagramClick function checks that no rendering errors exist and that SVG content is present before calling setIsFullscreen(true) to display the modal overlay.

Why doesn't the click event work when zooming is enabled?

When the zoomingEnabled configuration flag is set to true, CodeWiki disables the click-to-fullscreen functionality to prevent interaction conflicts with the svg-pan-zoom library. In this mode, the onClick handler is set to undefined and the cursor title hint disappears, allowing users to pan and zoom within the diagram container instead of opening a modal.

How does CodeWiki handle closing the fullscreen diagram view?

The FullScreenModal component implements multiple dismissal methods: pressing the Escape key, clicking outside the modal content area, or clicking the dedicated close button. The modal registers keydown listeners for the Escape key and mousedown listeners for outside-click detection, both calling setIsFullscreen(false) to return to the normal view.

What file contains the main click handling logic for Mermaid diagrams?

All click handling logic resides in frontend/components/Mermaid.tsx. This file contains the handleDiagramClick function, the isFullscreen state declaration, the conditional onClick attachment to the SVG container, and the FullScreenModal component definition with its interaction handlers.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}