GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues 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
commit e56effa029
7 changed files with 40 additions and 49 deletions
Show Stats 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', () => {
it('No config - use default', () => {
@ -206,8 +206,7 @@ graph TD
describe('when rendering several diagrams', () => {
it('diagrams should not taint later diagrams', () => {
const url = 'http://localhost:9000/theme-directives.html';
cy.visit(url);
cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
urlSnapshotTest(url, {});
});
});
});

3
cypress/platform/marker_unique_id.html
View File

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

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

@ -1,15 +1,6 @@
<html>
<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
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>
body {
/* background: rgb(221, 208, 208); */
@ -122,26 +113,21 @@
<script type="module">
import mermaid from './mermaid.esm.mjs';
mermaid.parseError = function (err, hash) {
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'dark',
// theme: 'dark',
// arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',
logLevel: 0,
// flowchart: { useMaxWidth: true },
graph: { curve: 'cardinal', htmlLabels: false },
// gantt: { axisFormat: '%m/%d/%Y' },
sequence: { actorMargin: 50, showSequenceNumbers: true },
// sequenceDiagram: { actorMargin: 300 } // deprecated
fontFamily: '"arial", sans-serif',
curve: 'cardinal',
securityLevel: 'strict',
startOnLoad: false,
});
function callback() {
alert('It worked');
await mermaid.run();
if (window.Cypress) {
window.rendered = true;
}
</script>
</body>

36
docs/syntax/xyChart.md
View File

@ -37,12 +37,12 @@ xychart-beta
### 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
...
### Title
### Title.
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
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
@ -94,7 +94,7 @@ A bar chart offers the capability to graphically depict bars.
#### 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
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 |
| xAxis | xAxis 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 |
### 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
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| Parameter | Description |
| ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
| Parameter | Description |
| ---------------- | --------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors separated by comma e.g. "#f3456, #43445" |
## Example on config and theme

2
package.json
View File

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

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

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

13
pnpm-lock.yaml generated
View File

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