Skip to content

feat: add plugin-markdown-chart #249

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 19 commits into from
Jun 7, 2025
Merged

feat: add plugin-markdown-chart #249

merged 19 commits into from
Jun 7, 2025

Conversation

Mister-Hope
Copy link
Member

No description provided.

@Mister-Hope Mister-Hope linked an issue Sep 20, 2024 that may be closed by this pull request
@Mister-Hope Mister-Hope force-pushed the plugin-markdown-chart branch from 89fa630 to b09f322 Compare October 1, 2024 04:13
@coveralls
Copy link

coveralls commented Oct 1, 2024

Pull Request Test Coverage Report for Build 15470406371

Details

  • 99 of 100 (99.0%) changed or added relevant lines in 5 files are covered.
  • No unchanged relevant lines lost coverage.
  • Overall coverage increased (+1.8%) to 61.616%

Changes Missing Coverage Covered Lines Changed/Added Lines %
plugins/markdown/plugin-markdown-chart/src/node/markdown-it-plugins/mermaid.ts 21 22 95.45%
Totals Coverage Status
Change from base Build 15466612977: 1.8%
Covered Lines: 1420
Relevant Lines: 2092

💛 - Coveralls

@Mister-Hope
Copy link
Member Author

@pengzhanbo I have some issues with katex in markmap, helps would be appreciated.

@pengzhanbo
Copy link
Member

pengzhanbo commented Oct 13, 2024

I have some issues with katex in markmap, helps would be appreciated.

I haven't used markmap before. I read its documentation and the code of the Markmap component in the plugin, and I did not find any obvious issues. However, I noticed that markmap-view depends on d3, and I'm not sure if that has any impact. Perhaps we can refer to markmap-autoloader to adjust the loading logic of the markmap component.

@Mister-Hope Mister-Hope force-pushed the plugin-markdown-chart branch from 203dcb9 to d4bad4a Compare October 22, 2024 11:05
Copy link

netlify bot commented Nov 27, 2024

Deploy Preview for vuepress-ecosystem ready!

Name Link
🔨 Latest commit 1b9f741
🔍 Latest deploy log https://app.netlify.com/sites/vuepress-ecosystem/deploys/676c4687d45e990008726f4f
😎 Deploy Preview https://deploy-preview-249--vuepress-ecosystem.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Mister-Hope Mister-Hope force-pushed the plugin-markdown-chart branch from f899860 to dd1668b Compare June 4, 2025 10:28
@Mister-Hope Mister-Hope marked this pull request as ready for review June 5, 2025 11:52
@Mister-Hope Mister-Hope requested a review from pengzhanbo June 5, 2025 12:07
@Mister-Hope
Copy link
Member Author

This PR is now ready, it will replace chart features in md-enhance.

@Mister-Hope Mister-Hope force-pushed the plugin-markdown-chart branch from 2578362 to fa7bad6 Compare June 5, 2025 14:38
Comment on lines +28 to +80
dark: isDarkMode,
background: isDarkMode ? '#1e1e1e' : '#fff',

primaryColor: isDarkMode ? '#389d70' : '#4abf8a',
primaryBorderColor: isDarkMode ? '#389d70' : '#4abf8a',
primaryTextColor: isDarkMode ? '#fff' : '#000',

secondaryColor: '#ffb500',
secondaryBorderColor: isDarkMode ? '#fff' : '#000',
secondaryTextColor: isDarkMode ? '#ddd' : '#333',

tertiaryColor: isDarkMode ? '#282828' : '#efeef4',
tertiaryBorderColor: isDarkMode ? '#bbb' : '#242424',
tertiaryTextColor: isDarkMode ? '#ddd' : '#333',

// Note
noteBkgColor: isDarkMode ? '#f6d365' : '#fff5ad',
noteTextColor: '#242424',
noteBorderColor: isDarkMode ? '#f6d365' : '#333',

lineColor: isDarkMode ? '#d3d3d3' : '#333',
textColor: isDarkMode ? '#fff' : '#242424',

mainBkg: isDarkMode ? '#389d70' : '#4abf8a',
errorBkgColor: '#eb4d5d',
errorTextColor: '#fff',

// Flowchart
nodeBorder: isDarkMode ? '#389d70' : '#4abf8a',
nodeTextColor: isDarkMode ? '#fff' : '#242424',

// Sequence
signalTextColor: isDarkMode ? '#9e9e9e' : '#242424',

// Class
classText: '#fff',

// State
labelColor: '#fff',

attributeBackgroundColorEven: isDarkMode ? '#0d1117' : '#fff',
attributeBackgroundColorOdd: isDarkMode ? '#161b22' : '#f8f8f8',

// Colors
fillType0: isDarkMode ? '#cf1322' : '#f1636e',
fillType1: '#f39c12',
fillType2: '#2ecc71',
fillType3: '#fa541c',
fillType4: '#25a55b',
fillType5: '#13c2c2',
fillType6: '#096dd9',
fillType7: '#aa6fe9',
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't necessarily have to use the default theme's green benchmark color, as it doesn't look very appealing. Here are some adjustments I made in the plume theme for your reference; I think this looks much nicer.

defineMermaidConfig({
  theme: 'default',
  themeVariables: isDarkMode => ({
-    primaryColor: isDarkMode ? '#389d70' : '#4abf8a',
-    primaryBorderColor: isDarkMode ? '#389d70' : '#4abf8a',
-    primaryTextColor: isDarkMode ? '#fff' : '#000',
+    primaryColor: isDarkMode ? '#c8abfa' : '#6f42c1',
+    primaryBorderColor: isDarkMode ? '#669' : '#99c',
+    primaryTextColor: isDarkMode ? '#c8abfa' : '#6f42c1',

-    noteBkgColor: isDarkMode ? '#f6d365' : '#fff5ad',
+    noteBkgColor: isDarkMode ? '#c96' : '#fff5ad',

-    noteBorderColor: isDarkMode ? '#f6d365' : '#333',
+    noteBorderColor: isDarkMode ? '#c86' : '#333',

-    textColor: isDarkMode ? '#fff' : '#242424',
+    textColor: isDarkMode ? '#d3d3d3' : '#242424',

-    mainBkg: isDarkMode ? '#389d70' : '#4abf8a',
+    mainBkg: isDarkMode ? 'rgb(159 122 234 / 0.16)' : 'rgb(159 122 234 / 0.14)',

-    nodeBorder: isDarkMode ? '#389d70' : '#4abf8a',
-    nodeTextColor: isDarkMode ? '#fff' : '#242424',
+    nodeBorder: isDarkMode ? '#669' : '#99c',
+    nodeTextColor: isDarkMode ? '#c8abfa' : '#6f42c1',
+    edgeLabelBackground: isDarkMode ? '#333' : '#ddd',
  }),
+  class: {
+    hideEmptyMembersBox: true,
+  },
+  look: 'handDrawn',
})

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
image

Let's merge it first and handle style improvements with a separate PR.

@Mister-Hope Mister-Hope merged commit 7f5fdff into main Jun 7, 2025
26 checks passed
@Mister-Hope Mister-Hope deleted the plugin-markdown-chart branch June 7, 2025 08:43
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.

[Feature request] add @vuepress/plugin-markdown-chart
3 participants