Merge branch 'develop' into pr/aloisklink/4112
* develop: test: test partial QuadrantChartConfig options test: fix types in `config.spec.ts` style: fix lint issues in src/config.spec.ts test: rename src/config.spec.js to config.spec.ts fix lint update homepage community link docs(flowchart): add documentation on multiple nodes style Add docker-specific command, leave commonly used command intact Support docs:dev in docker Fix lint. Update docs add ChatGPT plugin blog post Fix flowchart tooltip typing
This commit is contained in:
Sidharth Vinod
commit
29291c8901
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
# Announcements
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@
|
|||
|
||||
# Blog
|
||||
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
|
|
|
|||
|
|
@ -991,6 +991,24 @@ flowchart LR
|
|||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
This form can be used when declaring multiple links between nodes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress && pnpm --filter ./src/vitepress install --no-frozen-lockfile --ignore-scripts ",
|
||||
"docs:build:vitepress": "pnpm docs:pre:vitepress && (cd src/vitepress && pnpm run build) && cpy --flat src/docs/landing/ ./src/vitepress/.vitepress/dist/landing",
|
||||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
|
||||
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
|
||||
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
|
||||
"types:build-config": "ts-node-esm --transpileOnly scripts/create-types-from-json-schema.mts",
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
import isObject from 'lodash-es/isObject.js';
|
||||
import * as configApi from './config.js';
|
||||
|
||||
describe('when working with site config', function () {
|
||||
beforeEach(() => {
|
||||
// Resets the site config to default config
|
||||
configApi.setSiteConfig({});
|
||||
});
|
||||
it('should set site config and config properly', function () {
|
||||
let config_0 = { foo: 'bar', bar: 0 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
let config_1 = configApi.getSiteConfig();
|
||||
let config_2 = configApi.getConfig();
|
||||
expect(config_1.foo).toEqual(config_0.foo);
|
||||
expect(config_1.bar).toEqual(config_0.bar);
|
||||
expect(config_1).toEqual(config_2);
|
||||
});
|
||||
it('should respect secure keys when applying directives', function () {
|
||||
let config_0 = {
|
||||
foo: 'bar',
|
||||
bar: 'cant-be-changed',
|
||||
secure: [...configApi.defaultConfig.secure, 'bar'],
|
||||
};
|
||||
configApi.setSiteConfig(config_0);
|
||||
const directive = { foo: 'baf', bar: 'should-not-be-allowed' };
|
||||
const cfg = configApi.updateCurrentConfig(config_0, [directive]);
|
||||
expect(cfg.foo).toEqual(directive.foo);
|
||||
expect(cfg.bar).toBe(config_0.bar);
|
||||
});
|
||||
it('should set reset config properly', function () {
|
||||
let config_0 = { foo: 'bar', bar: 0 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
let config_1 = { foo: 'baf' };
|
||||
configApi.setConfig(config_1);
|
||||
let config_2 = configApi.getConfig();
|
||||
expect(config_2.foo).toEqual(config_1.foo);
|
||||
configApi.reset();
|
||||
let config_3 = configApi.getConfig();
|
||||
expect(config_3.foo).toEqual(config_0.foo);
|
||||
let config_4 = configApi.getSiteConfig();
|
||||
expect(config_4.foo).toEqual(config_0.foo);
|
||||
});
|
||||
it('should set global reset config properly', function () {
|
||||
let config_0 = { foo: 'bar', bar: 0 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
let config_1 = configApi.getSiteConfig();
|
||||
expect(config_1.foo).toEqual(config_0.foo);
|
||||
let config_2 = configApi.getConfig();
|
||||
expect(config_2.foo).toEqual(config_0.foo);
|
||||
configApi.setConfig({ foobar: 'bar0' });
|
||||
let config_3 = configApi.getConfig();
|
||||
expect(config_3.foobar).toEqual('bar0');
|
||||
configApi.reset();
|
||||
let config_4 = configApi.getConfig();
|
||||
expect(config_4.foobar).toBeUndefined();
|
||||
});
|
||||
|
||||
it('test new default config', async function () {
|
||||
const { default: oldDefault } = await import('./oldDefaultConfig.js');
|
||||
// gitGraph used to not have this option (aka it was `undefined`)
|
||||
oldDefault.gitGraph.useMaxWidth = false;
|
||||
|
||||
// class diagrams used to not have these options set (aka they were `undefined`)
|
||||
oldDefault.class.htmlLabels = false;
|
||||
|
||||
const { default: newDefault } = await import('./defaultConfig.js');
|
||||
|
||||
// check subsets of the objects, to improve vitest error messages
|
||||
// we can't just use `expect(newDefault).to.deep.equal(oldDefault);`
|
||||
// because the functions in the config won't be the same
|
||||
expect(new Set(Object.keys(newDefault))).to.deep.equal(new Set(Object.keys(oldDefault)));
|
||||
|
||||
for (const key in newDefault) {
|
||||
// recurse through object, since we want to treat functions differently
|
||||
if (!Array.isArray(newDefault[key]) && isObject(newDefault[key])) {
|
||||
expect(new Set(Object.keys(newDefault[key]))).to.deep.equal(
|
||||
new Set(Object.keys(oldDefault[key]))
|
||||
);
|
||||
for (const key2 in newDefault[key]) {
|
||||
if (typeof newDefault[key][key2] === 'function') {
|
||||
expect(newDefault[key][key2].toString()).to.deep.equal(
|
||||
oldDefault[key][key2].toString()
|
||||
);
|
||||
} else {
|
||||
expect(newDefault[key]).to.have.deep.property(key2, oldDefault[key][key2]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
expect(newDefault[key]).to.deep.equal(oldDefault[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
import * as configApi from './config.js';
|
||||
|
||||
describe('when working with site config', function () {
|
||||
beforeEach(() => {
|
||||
// Resets the site config to default config
|
||||
configApi.setSiteConfig({});
|
||||
});
|
||||
it('should set site config and config properly', function () {
|
||||
const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
const config_1 = configApi.getSiteConfig();
|
||||
const config_2 = configApi.getConfig();
|
||||
expect(config_1.fontFamily).toEqual(config_0.fontFamily);
|
||||
expect(config_1.fontSize).toEqual(config_0.fontSize);
|
||||
expect(config_1).toEqual(config_2);
|
||||
});
|
||||
it('should respect secure keys when applying directives', function () {
|
||||
const config_0 = {
|
||||
fontFamily: 'foo-font',
|
||||
fontSize: 12345, // can't be changed
|
||||
secure: [...configApi.defaultConfig.secure!, 'fontSize'],
|
||||
};
|
||||
configApi.setSiteConfig(config_0);
|
||||
const directive = { fontFamily: 'baf', fontSize: 54321 /* fontSize shouldn't be changed */ };
|
||||
const cfg = configApi.updateCurrentConfig(config_0, [directive]);
|
||||
expect(cfg.fontFamily).toEqual(directive.fontFamily);
|
||||
expect(cfg.fontSize).toBe(config_0.fontSize);
|
||||
});
|
||||
it('should allow setting partial options', function () {
|
||||
const defaultConfig = configApi.getConfig();
|
||||
|
||||
configApi.setConfig({
|
||||
quadrantChart: {
|
||||
chartHeight: 600,
|
||||
},
|
||||
});
|
||||
|
||||
const updatedConfig = configApi.getConfig();
|
||||
|
||||
// deep options we didn't update should remain the same
|
||||
expect(defaultConfig.quadrantChart!.chartWidth).toEqual(
|
||||
updatedConfig.quadrantChart!.chartWidth
|
||||
);
|
||||
});
|
||||
it('should set reset config properly', function () {
|
||||
const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
const config_1 = { fontFamily: 'baf' };
|
||||
configApi.setConfig(config_1);
|
||||
const config_2 = configApi.getConfig();
|
||||
expect(config_2.fontFamily).toEqual(config_1.fontFamily);
|
||||
configApi.reset();
|
||||
const config_3 = configApi.getConfig();
|
||||
expect(config_3.fontFamily).toEqual(config_0.fontFamily);
|
||||
const config_4 = configApi.getSiteConfig();
|
||||
expect(config_4.fontFamily).toEqual(config_0.fontFamily);
|
||||
});
|
||||
it('should set global reset config properly', function () {
|
||||
const config_0 = { fontFamily: 'foo-font', fontSize: 150 };
|
||||
configApi.setSiteConfig(config_0);
|
||||
const config_1 = configApi.getSiteConfig();
|
||||
expect(config_1.fontFamily).toEqual(config_0.fontFamily);
|
||||
const config_2 = configApi.getConfig();
|
||||
expect(config_2.fontFamily).toEqual(config_0.fontFamily);
|
||||
configApi.setConfig({ altFontFamily: 'bar-font' });
|
||||
const config_3 = configApi.getConfig();
|
||||
expect(config_3.altFontFamily).toEqual('bar-font');
|
||||
configApi.reset();
|
||||
const config_4 = configApi.getConfig();
|
||||
expect(config_4.altFontFamily).toBeUndefined();
|
||||
});
|
||||
});
|
||||
|
|
@ -342,7 +342,10 @@ export const setLink = function (ids, linkStr, target) {
|
|||
setClass(ids, 'clickable');
|
||||
};
|
||||
export const getTooltip = function (id) {
|
||||
return tooltips[id];
|
||||
if (tooltips.hasOwnProperty(id)) {
|
||||
return tooltips[id];
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -443,7 +446,7 @@ export const clear = function (ver = 'gen-1') {
|
|||
subGraphs = [];
|
||||
subGraphLookup = {};
|
||||
subCount = 0;
|
||||
tooltips = [];
|
||||
tooltips = {};
|
||||
firstGraphFlag = true;
|
||||
version = ver;
|
||||
commonClear();
|
||||
|
|
|
|||
|
|
@ -16,8 +16,12 @@ import { teamMembers } from '../contributors';
|
|||
<p text-lg max-w-200 text-center leading-7>
|
||||
<Contributors />
|
||||
<br />
|
||||
<a href="https://chat.vitest.dev" rel="noopener noreferrer">Join the community</a> and
|
||||
get involved!
|
||||
<a
|
||||
href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE"
|
||||
rel="noopener noreferrer"
|
||||
>Join the community</a
|
||||
>
|
||||
and get involved!
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
# Announcements
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
# Blog
|
||||
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vitepress --port 3333 --open",
|
||||
"dev:docker": "vitepress --port 3333 --host",
|
||||
"build": "pnpm prefetch && vitepress build",
|
||||
"build-no-prefetch": "vitepress build",
|
||||
"serve": "vitepress serve",
|
||||
|
|
|
|||
|
|
@ -676,6 +676,16 @@ flowchart LR
|
|||
classDef someclass fill:#f96
|
||||
```
|
||||
|
||||
This form can be used when declaring multiple links between nodes:
|
||||
|
||||
```mermaid-example
|
||||
flowchart LR
|
||||
A:::foo & B:::bar --> C:::foobar
|
||||
classDef foo stroke:#f00
|
||||
classDef bar stroke:#0f0
|
||||
classDef foobar stroke:#00f
|
||||
```
|
||||
|
||||
### Css classes
|
||||
|
||||
It is also possible to predefine classes in css styles that can be applied from the graph definition as in the example
|
||||
|
|
|
|||
2
run
2
run
|
|
@ -27,7 +27,7 @@ $RUN --service-ports mermaid sh -c "npx pnpm run dev"
|
|||
;;
|
||||
|
||||
docs:dev)
|
||||
$RUN --service-ports mermaid sh -c "cd packages/mermaid/src/docs && npx pnpm prefetch && npx vitepress --port 3333 --host"
|
||||
$RUN --service-ports mermaid sh -c "npx pnpm run --filter mermaid docs:dev:docker"
|
||||
;;
|
||||
|
||||
cypress)
|
||||
|
|
|
|||
Loading…
Reference in New Issue