marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into feature/4269_add_xychart

Browse Source
This commit is contained in:
Subhash Halder
2023-09-19 21:16:52 +05:30
parent e061489b84 8be8736131
commit e56effa029
7 changed files with 40 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cypress/integration/rendering/conf-and-directives.spec.js
View File

@@ -1,4 +1,4 @@
import { imgSnapshotTest } from '../../helpers/util.ts'; import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
describe('Configuration and directives - nodes should be light blue', () => { describe('Configuration and directives - nodes should be light blue', () => {
it('No config - use default', () => { it('No config - use default', () => {
@@ -206,8 +206,7 @@ graph TD
describe('when rendering several diagrams', () => { describe('when rendering several diagrams', () => {
it('diagrams should not taint later diagrams', () => { it('diagrams should not taint later diagrams', () => {
const url = 'http://localhost:9000/theme-directives.html'; const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url); urlSnapshotTest(url, {});
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
}); });
}); });
}); });

3
cypress/platform/marker_unique_id.html
View File

@@ -42,7 +42,8 @@
</pre> </pre>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.initialize({ startOnLoad: true, logLevel: 0 }); mermaid.initialize({ startOnLoad: false, logLevel: 0 });
await mermaid.run();
if (window.Cypress) { if (window.Cypress) {
window.rendered = true; window.rendered = true;

28
cypress/platform/theme-directives.html
View File

@@ -1,15 +1,6 @@
<html> <html>
<head> <head>
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link
href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap"
rel="stylesheet"
/>
<style> <style>
body { body {
/* background: rgb(221, 208, 208); */ /* background: rgb(221, 208, 208); */
@@ -122,26 +113,21 @@
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({ mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0, logLevel: 0,
// flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', htmlLabels: false }, graph: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true }, sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif', fontFamily: '"arial", sans-serif',
curve: 'cardinal', curve: 'cardinal',
securityLevel: 'strict', securityLevel: 'strict',
startOnLoad: false,
}); });
function callback() {
alert('It worked'); await mermaid.run();
if (window.Cypress) {
window.rendered = true;
} }
</script> </script>
</body> </body>

36
docs/syntax/xyChart.md
View File

@@ -37,12 +37,12 @@ xychart-beta
### Orientations ### Orientations
The chart can be drawn horizontal or vertical, default value is vertical The chart can be drawn horizontal or vertical, default value is vertical.
xychart-beta horizontal xychart-beta horizontal
... ...
### Title ### Title.
The title is a short description of the chart and it will always render on top of the chart. The title is a short description of the chart and it will always render on top of the chart.
@@ -66,7 +66,7 @@ The x-axis primarily serves as a categorical value, although it can also functio
### y-axis ### y-axis
The y-axis is employed to represent numerical range values, it can't have categorical values. The y-axis is employed to represent numerical range values, it cannot have categorical values.
#### Example #### Example
@@ -94,7 +94,7 @@ A bar chart offers the capability to graphically depict bars.
#### Simplest example #### Simplest example
Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like The only two things required are the chart name (`xychart-beta`) and one data set. So you will be able to draw a chart with a simple config like
xychart-beta xychart-beta
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
@@ -110,7 +110,7 @@ Every grammer are optional other than the chart name and one data set, so you wi
| showTitle | Title to be shown or not | true | | showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig | | xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | chartOrientation | 'vertical' or 'horizontal' | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig ### AxisConfig
@@ -135,19 +135,19 @@ Every grammer are optional other than the chart name and one data set, so you wi
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax > Themes for xychart resides inside xychart attribute so to set the variables use this syntax
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% > %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| Parameter | Description | | Parameter | Description |
| ---------------- | ------------------------------------------------------- | | ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart | | backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text | | titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels | | xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title | | xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick | | xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line | | xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels | | yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title | | yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick | | yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line | | yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" | | plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
## Example on config and theme ## Example on config and theme

2
package.json
View File

@@ -4,7 +4,7 @@
"version": "10.2.4", "version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"packageManager": "pnpm@8.7.5", "packageManager": "pnpm@8.7.6",
"keywords": [ "keywords": [
"diagram", "diagram",
"markdown", "markdown",

2
packages/mermaid/src/docs/package.json
View File

@@ -32,7 +32,7 @@
"unplugin-vue-components": "^0.25.0", "unplugin-vue-components": "^0.25.0",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-pwa": "^0.16.0", "vite-plugin-pwa": "^0.16.0",
"vitepress": "1.0.0-rc.12", "vitepress": "1.0.0-rc.14",
"workbox-window": "^7.0.0" "workbox-window": "^7.0.0"
} }
} }

13
pnpm-lock.yaml generated
View File

@@ -475,8 +475,8 @@ importers:
specifier: ^0.16.0 specifier: ^0.16.0
version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0) version: 0.16.0(vite@4.4.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress: vitepress:
specifier: 1.0.0-rc.12 specifier: 1.0.0-rc.14
version: 1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0) version: 1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0)
workbox-window: workbox-window:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.0.0 version: 7.0.0
@@ -15536,9 +15536,14 @@ packages:
- terser - terser
dev: true dev: true
/vitepress@1.0.0-rc.12(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0): /vitepress@1.0.0-rc.14(@algolia/client-search@4.19.1)(@types/node@18.17.5)(search-insights@2.7.0):
resolution: {integrity: sha512-mZknN5l9lgbBjXwumwdOQQDM+gPivswFEykEQeenY0tv7eocS+bb801IpFZT3mFV6YRhSddmbutHlFgPPADjEg==} resolution: {integrity: sha512-yChIeXOAcNvVnSVjhziH1vte0uhKb00PuZf7KdIMfx3ixTMAz73Nn+6gREvCv0SdH+anteGUKz5eljv0ygcgGQ==}
hasBin: true hasBin: true
peerDependencies:
markdown-it-mathjax3: ^4.3.2
peerDependenciesMeta:
markdown-it-mathjax3:
optional: true
dependencies: dependencies:
'@docsearch/css': 3.5.2 '@docsearch/css': 3.5.2
'@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0) '@docsearch/js': 3.5.2(@algolia/client-search@4.19.1)(search-insights@2.7.0)