Mermaid diagram support across the application #1373
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create MermaidWithToggle component for rendering Mermaid diagrams - Add toggle functionality to switch between diagram and source code view - Support SVG and PNG export/download options - Add PreRenderer to skip prose styling for mermaid blocks - Integrate mermaid rendering into Markdown CodeRenderer - Re-export MermaidWithToggle for backward compatibility
Add instruction for AI to use Mermaid diagrams in code blocks when explaining processes, relationships, or structures in chat responses. This enables visual representation of complex concepts.
- Change initial view mode from 'diagram' to 'code' during streaming - Add debounce mechanism (500ms) to detect when code stops changing - Automatically switch to diagram view once code becomes stable - Improves UX by preventing incomplete diagram renders during streaming
Add new "diagram" style to meeting minutes generation feature that creates visual diagram representations of meeting content. Includes: - New style_diagram translations for all supported languages - Updated style selector in MeetingMinutesGeneration component - Added diagram type to MeetingMinutesStyle union - Added prompt template for diagram generation
Replace inline arrow functions with useCallback-memoized handlers for
onRecordingStateChange props in MeetingMinutesTranscription and
MeetingMinutesRealtimeTranslation components to prevent re-render loops.
以下のエラーが無限に表示されます。
installHook.js:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render. Error Component Stack
at MeetingMinutesTranscription (MeetingMinutesTranscription.tsx:48:8)
at div (<anonymous>)
at div (<anonymous>)
at div (<anonymous>)
at Card (Card.tsx:17:15)
at div (<anonymous>)
at div (<anonymous>)
at div (<anonymous>)
at MeetingMinutesPage (MeetingMinutesPage.tsx:51:17)
at App (App.tsx:71:17)
at AuthWithUserpool (AuthWithUserpool.tsx:20:23)
- Add translation keys for panel selection UI (both_panel, generation_panel, transcription_panel) across en, ja, ko, th, vi - Update MeetingMinutesTranscription component layout with improved spacing and flex properties
- Add 'summary' and 'detail' styles to MeetingMinutesParams type - Change default minutes style from 'faq' to 'summary' - Centralize style type definition in prompts/index.ts - Reorder style options in dropdown for better UX - Remove duplicate MeetingMinutesStyle type from hook
- Add diagram generation options (flowchart, mindmap, sequence, timeline) - Implement settings modal with gear icon for configuration - Add toggle functionality for selecting multiple diagram types - Add i18n translations for diagram options and settings in en/ja
…onent - Move settings modal UI from MeetingMinutesGeneration to dedicated component - Remove unused imports (Checkbox, ModalDialog, Select, Switch, Textarea) - Improve code organization and maintainability
…gle UI - Replace separate mic/screen audio toggles with TogglePillButton component - Add input source selection dropdown with desktop and microphone options - Add translation keys for input_source, microphone, and option in EN/JA - Relocate start/stop recording buttons to transcript panel header - Integrate Help component for improved UI consistency - Streamline audio control interface for better user experience
- Lighten placeholder text color from gray-500 to gray-400 for better visual hierarchy - Add horizontal scroll to tab headers for better mobile experience - Reduce tab text size to improve spacing and readability - Ensure tab content containers use full height for proper layout
- Remove unnecessary flexbox classes from select containers - Reduce bottom padding in settings panel - Remove outlined prop from start recording button - Increase mobile icon sizes from 7x7 to 10x10 for better touch targets - Simplify div styling by removing redundant flex properties
- Add mobile detection using useIsMobile hook - Make settings panel collapsible on mobile devices to save screen space - Add gear and caret icons to settings header for better UX - Settings expand/collapse based on screen size (collapsed on mobile, expanded on desktop) - Improve responsive design for meeting minutes translation interface
- Extract recording control buttons into reusable MeetingMinutesControlButtons component - Add collapsible settings panel with speaker configuration options - Improve component organization and mobile responsiveness - Add screen audio support and speaker label management
…button text - Add new whiteboard style option for meeting minutes generation - Simplify "clear_minutes" button text across all language files - Update UI components to support whiteboard style selection
Add view/hide prompt functionality to meeting minutes settings with translations for English, Japanese, Korean, Vietnamese, and Chinese. Includes system prompt preview capability in the settings modal.
Contributor
|
I like this feature to enable drawing mermaid diagram in chat and meeting minutes! The following is my impression to this feature.
|
Sugi275
added
auto-deploy
Collaborator
|
@daisuke-awaji Mermaid の図解についてGenU がデフォルトで提供している議事録スタイルの、「要約」「詳細」「質疑応答」「文字起こし」に Mermaid の出力は無くても良いのではないかなと思いました。この議事録機能を利用する方は、Mermaid の図解よりも、まずはテキストのアウトプットを期待しているためです。他の議事録スタイルの「図解」「ホワイトボード」には、この実装通りで問題ないとおもいます。ユーザー側で、図解が欲しいと思った際に選択できる機能が良いと思いました。 |
…instructions - Add 'summary' style for concise meeting summaries with key points, decisions, and action items - Add 'detail' style for comprehensive meeting records with full discussion flow - Remove Mermaid diagram guidelines from newspaper, faq, and transcription prompts - Simplify existing prompts by removing appended diagram instructions These changes provide more specialized options for meeting transcription processing while streamlining prompts that don't require diagram visualization guidance.
Sugi275
added
auto-deploy
Sugi275
approved these changes
Jan 6, 2026
Collaborator
Sugi275
left a comment
Sugi275
left a comment
There was a problem hiding this comment.
ご指摘修正ありがとうございます！ LGTM です！
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of Changes
Mermaid diagram support across the application and enhances the meeting minutes feature with diagram generation capabilities.
Checklist
npm run cdk:testand if there are snapshot differences, executenpm run cdk:test:update-snapshotto update snapshotsRelated Issues
#1349
#1330
#1331
Screenshot / ChatPage (AFTER)
Screenshot / Meeting Minutes Page (BEFORE)
Screenshot / Meeting Minutes Page (AFTER)