mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-07 21:14:27 +01:00
Merge remote-tracking branch 'nirname/develop' into feature/4492_sankey-diagrams
This commit is contained in:
Nikolay Rozhkov
@@ -95,7 +95,7 @@
|
||||
"globby": "^13.1.4",
|
||||
"jison": "^0.4.18",
|
||||
"js-base64": "^3.7.5",
|
||||
"jsdom": "^21.1.1",
|
||||
"jsdom": "^22.0.0",
|
||||
"micromatch": "^4.0.5",
|
||||
"path-browserify": "^1.0.1",
|
||||
"prettier": "^2.8.8",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Cluster handling
|
||||
|
||||
Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few work-arounds.
|
||||
Dagre does not support edges between nodes and clusters or between clusters to other clusters. In order to remedy this shortcoming the dagre wrapper implements a few workarounds.
|
||||
|
||||
In the diagram below there are two clusters and there are no edges to nodes outside the own cluster.
|
||||
|
||||
@@ -73,7 +73,7 @@ Sample object:
|
||||
}
|
||||
```
|
||||
|
||||
This is set by the renderer of the diagram and insert the data that the wrapper neds for rendering.
|
||||
This is set by the renderer of the diagram and insert the data that the wrapper needs for rendering.
|
||||
|
||||
| property | description |
|
||||
| ---------- | ------------------------------------------------------------------------------------------------ |
|
||||
@@ -114,7 +114,7 @@ Required edgeData for proper rendering:
|
||||
| label | overlap between label and labelText? |
|
||||
| labelPos | |
|
||||
| labelType | overlap between label and labelText? |
|
||||
| thickness | Sets the thinkess of the edge. Can be \['normal', 'thick'\] |
|
||||
| thickness | Sets the thickness of the edge. Can be \['normal', 'thick'\] |
|
||||
| pattern | Sets the pattern of the edge. Can be \['solid', 'dotted', 'dashed'\] |
|
||||
|
||||
# Markers
|
||||
|
||||
@@ -602,6 +602,8 @@ const doublecircle = async (parent, node) => {
|
||||
const outerCircle = circleGroup.insert('circle');
|
||||
const innerCircle = circleGroup.insert('circle');
|
||||
|
||||
circleGroup.attr('class', node.class);
|
||||
|
||||
// center the circle around its coordinate
|
||||
outerCircle
|
||||
.attr('style', node.style)
|
||||
|
||||
@@ -7,7 +7,6 @@ import { addStylesForDiagram } from '../styles.js';
|
||||
import { DiagramDefinition, DiagramDetector } from './types.js';
|
||||
import * as _commonDb from '../commonDb.js';
|
||||
import { parseDirective as _parseDirective } from '../directiveUtils.js';
|
||||
import isEmpty from 'lodash-es/isEmpty.js';
|
||||
|
||||
/*
|
||||
Packaging and exposing resources for external diagrams so that they can import
|
||||
@@ -51,9 +50,7 @@ export const registerDiagram = (
|
||||
if (detector) {
|
||||
addDetector(id, detector);
|
||||
}
|
||||
if (!isEmpty(diagram.styles)) {
|
||||
addStylesForDiagram(id, diagram.styles);
|
||||
}
|
||||
addStylesForDiagram(id, diagram.styles);
|
||||
|
||||
if (diagram.injectUtils) {
|
||||
diagram.injectUtils(
|
||||
|
||||
@@ -82,3 +82,5 @@ export type ParseDirectiveDefinition = (statement: string, context: string, type
|
||||
export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
|
||||
|
||||
export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
|
||||
|
||||
export type DiagramStylesProvider = (options?: any) => string;
|
||||
|
||||
@@ -60,7 +60,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
|
||||
## Blogs
|
||||
|
||||
- [Wordpress](https://wordpress.org)
|
||||
- [WordPress](https://wordpress.org)
|
||||
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
|
||||
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
|
||||
- [Hexo](https://hexo.io)
|
||||
@@ -78,7 +78,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
- [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
|
||||
- [Grav CMS](https://getgrav.org/)
|
||||
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
|
||||
- [Gitlab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
||||
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
|
||||
|
||||
## Communication
|
||||
|
||||
@@ -98,7 +98,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
|
||||
- [Semantic Media Wiki](https://semantic-mediawiki.org)
|
||||
- [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
|
||||
- [FosWiki](https://foswiki.org)
|
||||
- [Foswiki](https://foswiki.org)
|
||||
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
|
||||
- [DokuWiki](https://dokuwiki.org)
|
||||
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
|
||||
@@ -166,7 +166,7 @@ They also serve as proof of concept, for the variety of things that can be built
|
||||
- [rehype-mermaidjs](https://github.com/remcohaszing/rehype-mermaidjs)
|
||||
- [Gatsby](https://www.gatsbyjs.com/)
|
||||
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
|
||||
- [jSDoc](https://jsdoc.app/)
|
||||
- [JSDoc](https://jsdoc.app/)
|
||||
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
|
||||
- [MkDocs](https://www.mkdocs.org)
|
||||
- [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
"unplugin-vue-components": "^0.25.0",
|
||||
"vite": "^4.3.3",
|
||||
"vite-plugin-pwa": "^0.16.0",
|
||||
"vitepress": "1.0.0-beta.2",
|
||||
"workbox-window": "^6.5.4"
|
||||
"vitepress": "1.0.0-beta.3",
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -172,9 +172,11 @@ let us look at same example, where we have disabled the multiColor option.
|
||||
|
||||
### Customizing Color scheme
|
||||
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
You can customize the color scheme using the `cScale0` to `cScale11` theme variables, which will change the background colors. Mermaid allows you to set unique colors for up-to 12 sections, where `cScale0` variable will drive the value of the first section or time-period, `cScale1` will drive the value of the second section and so on.
|
||||
In case you have more than 12 sections, the color scheme will start to repeat.
|
||||
|
||||
If you also want to change the foreground color of a section, you can do so use theme variables corresponding `cScaleLabel0` to `cScaleLabel11` variables.
|
||||
|
||||
NOTE: Default values for these theme variables are picked from the selected theme. If you want to override the default values, you can use the `initialize` call to add your custom theme variable values.
|
||||
|
||||
Example:
|
||||
@@ -183,9 +185,9 @@ Now let's override the default values for the `cScale0` to `cScale2` variables:
|
||||
|
||||
```mermaid-example
|
||||
%%{init: { 'logLevel': 'debug', 'theme': 'default' , 'themeVariables': {
|
||||
'cScale0': '#ff0000',
|
||||
'cScale0': '#ff0000', 'cScaleLabel0': '#ffffff',
|
||||
'cScale1': '#00ff00',
|
||||
'cScale2': '#0000ff'
|
||||
'cScale2': '#0000ff', 'cScaleLabel2': '#ffffff'
|
||||
} } }%%
|
||||
timeline
|
||||
title History of Social Media Platform
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import type { FlowChartStyleOptions } from './diagrams/flowchart/styles.js';
|
||||
import { log } from './logger.js';
|
||||
import type { DiagramStylesProvider } from './diagram-api/types.js';
|
||||
|
||||
const themes: Record<string, any> = {};
|
||||
const themes: Record<string, DiagramStylesProvider> = {};
|
||||
|
||||
const getStyles = (
|
||||
type: string,
|
||||
@@ -73,8 +74,10 @@ const getStyles = (
|
||||
`;
|
||||
};
|
||||
|
||||
export const addStylesForDiagram = (type: string, diagramTheme: unknown): void => {
|
||||
themes[type] = diagramTheme;
|
||||
export const addStylesForDiagram = (type: string, diagramTheme?: DiagramStylesProvider): void => {
|
||||
if (diagramTheme !== undefined) {
|
||||
themes[type] = diagramTheme;
|
||||
}
|
||||
};
|
||||
|
||||
export default getStyles;
|
||||
|
||||
Reference in New Issue
Block a user