Skip to content

feat: add custom Mermaid configuration support#122

Merged
haydenbleasel merged 3 commits intovercel:mainfrom
ayhansipahi:main
Sep 11, 2025
Merged

feat: add custom Mermaid configuration support#122
haydenbleasel merged 3 commits intovercel:mainfrom
ayhansipahi:main

Conversation

@ayhansipahi
Copy link
Copy Markdown
Contributor

Description

Implements the ability to pass custom properties during Mermaid initialization as requested in issue #120. Users can now customize themes, colors, fonts, and other Mermaid rendering options.

Type of Change

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation update
  • Performance improvement
  • Refactoring (no functional changes)

Related Issues

Closes #120

Changes Made

  • Add mermaidConfig prop to Streamdown component - Use official MermaidConfig type from mermaid package - Pass config through React Context to Mermaid components - Update documentation with usage examples - Add comprehensive tests for configuration handling

Testing

  • All existing tests pass
  • Added new tests for the changes
  • Manually tested the changes

Test Coverage

 Test Files  10 passed (10)
      Tests  217 passed (217)
   Start at  00:06:34
   Duration  2.49s (transform 550ms, setup 2.60s, collect 4.00s, tests 1.84s, environment 5.85s, prepare 953ms)

 % Coverage report from v8
-------------------------------|---------|----------|---------|---------|-----------------------------------------------
File                           | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s                             
-------------------------------|---------|----------|---------|---------|-----------------------------------------------
All files                      |   81.61 |    93.31 |      80 |   81.61 |                                               
 streamdown                    |     100 |      100 |     100 |     100 |                                               
  index.tsx                    |     100 |      100 |     100 |     100 |                                               
 streamdown/lib                |   80.55 |    92.95 |      80 |   80.55 |                                               
  code-block.tsx               |   98.57 |    93.33 |      90 |   98.57 | 90,576-582                                    
  components.tsx               |      98 |    86.84 |     100 |      98 | 53-56,58                                      
  image.tsx                    |     4.1 |      100 |       0 |     4.1 | 13-98                                         
  mermaid.tsx                  |   98.91 |     90.9 |     100 |   98.91 | 81                                            
  parse-blocks.tsx             |     100 |       75 |     100 |     100 | 19,32-33                                      
  parse-incomplete-markdown.ts |   94.49 |    96.51 |   94.44 |   94.49 | 73-74,370-373,419-433                         
  table.tsx                    |   23.44 |       75 |   16.66 |   23.44 | 10-88,111-160,195-267,286-314,318-324,346-361 
  utils.ts                     |   28.57 |      100 |      50 |   28.57 | 7-16                                          
-------------------------------|---------|----------|---------|---------|-----------------------------------------------
└─ streamdown#test:coverage ──

 Tasks:    1 successful, 1 total
Cached:    0 cached, 1 total
  Time:    3.342s 

Screenshots/Demos

Checklist

  • My code follows the project's code style
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings or errors
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing unit tests pass locally with my changes
  • I have created a changeset (pnpm changeset)

Changeset

  • I have created a changeset for these changes

Additional Notes

@haydenbleasel
Copy link
Copy Markdown
Contributor

@ayhansipahi legendary improvement 🚀

@haydenbleasel haydenbleasel merged commit d2edc90 into vercel:main Sep 11, 2025
3 of 4 checks passed
own-boldsbrain pushed a commit to own-boldsbrain/streamdown that referenced this pull request Sep 22, 2025
* feat: add custom Mermaid configuration support

* ci: add change set

* fix: optimize mermaid config comparison and initialization
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mermid props

2 participants