mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
chore: Fix vitepress build
This commit is contained in:
Sidharth Vinod
parent
b7d24c8325
commit
13e5c5ba72
3
.gitignore
vendored
3
.gitignore
vendored
@ -33,5 +33,4 @@ cypress/snapshots/
|
||||
.tsbuildinfo
|
||||
tsconfig.tsbuildinfo
|
||||
|
||||
#docs generate from code
|
||||
packages/mermaid/src/docs/config/setup
|
||||
packages/mermaid/src/vitepress
|
||||
@ -13,6 +13,7 @@
|
||||
"Mindmaps",
|
||||
"mitigations",
|
||||
"sandboxed",
|
||||
"shiki",
|
||||
"Sveidqvist",
|
||||
"verdana",
|
||||
"Visio"
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
const CustomMarkdown = (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
|
||||
if (token.info.trim() === 'warning') {
|
||||
return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'note') {
|
||||
return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'jison') {
|
||||
return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')}}</code></pre></div>`;
|
||||
}
|
||||
|
||||
return fence(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
export default CustomMarkdown;
|
||||
@ -1,176 +0,0 @@
|
||||
import { version } from '../../../package.json';
|
||||
import MermaidExample from './mermaid-markdown-all';
|
||||
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
|
||||
import CustomMarkdown from './blocks-markdown';
|
||||
import { defineConfig } from 'vitepress';
|
||||
|
||||
const allMarkdownTransformers = {
|
||||
config: async (md) => {
|
||||
MermaidMarkdown(md);
|
||||
await MermaidExample(md);
|
||||
CustomMarkdown(md);
|
||||
},
|
||||
};
|
||||
|
||||
export default defineConfig({
|
||||
lang: 'en-US',
|
||||
title: 'Mermaid',
|
||||
description: 'Create diagrams and visualizations using text and code.',
|
||||
base: '/mermaid-js/',
|
||||
markdown: allMarkdownTransformers,
|
||||
head: [['link', { rel: 'icon', type: 'image/x-icon', href: '/mermaid-js/favicon.ico' }]],
|
||||
themeConfig: {
|
||||
nav: nav(),
|
||||
editLink: {
|
||||
pattern: 'https://github.com/mermaid-js/mermaid/edit/develop/packages/mermaid/src/docs/:path',
|
||||
text: 'Edit this page on GitHub',
|
||||
},
|
||||
|
||||
sidebar: {
|
||||
'/': sidebarAll(),
|
||||
// "/intro/": sidebarIntro(),
|
||||
// "/syntax/": sidebarSyntax(),
|
||||
// "/config": sidebarConfig(),
|
||||
// "/misc/": sidebarMisc(),
|
||||
// "/community/": sidebarCommunity(),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function nav() {
|
||||
return [
|
||||
{ text: 'Intro', link: '/intro/', activeMatch: '/intro/' },
|
||||
{
|
||||
text: 'Configuration',
|
||||
link: '/config/Tutorials',
|
||||
activeMatch: '/config/',
|
||||
},
|
||||
{ text: 'Syntax', link: '/syntax/classDiagram', activeMatch: '/syntax/' },
|
||||
{ text: 'Misc', link: '/misc/integrations', activeMatch: '/misc/' },
|
||||
{
|
||||
text: 'Community',
|
||||
link: '/community/n00b-overview',
|
||||
activeMatch: '/community/',
|
||||
},
|
||||
{
|
||||
text: version,
|
||||
items: [
|
||||
{
|
||||
text: 'Changelog',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CHANGELOG.md',
|
||||
},
|
||||
{
|
||||
text: 'Contributing',
|
||||
link: 'https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '💻 Live Editor',
|
||||
link: 'https://mermaid.live',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarAll() {
|
||||
return [
|
||||
{
|
||||
text: '📔 Introduction',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'About Mermaid', link: '/intro/' },
|
||||
{ text: 'Deployment', link: '/intro/n00b-gettingStarted' },
|
||||
{
|
||||
text: 'Syntax and Configuration',
|
||||
link: '/intro/n00b-syntaxReference',
|
||||
},
|
||||
],
|
||||
},
|
||||
...sidebarSyntax(),
|
||||
...sidebarConfig(),
|
||||
...sidebarMisc(),
|
||||
...sidebarCommunity(),
|
||||
// {
|
||||
// text: "Generated",
|
||||
// items: [{ text: "modules", link: "docs/code/modules" }],
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarSyntax() {
|
||||
return [
|
||||
{
|
||||
text: '📊 Diagram Syntax',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Flowchart', link: '/syntax/flowchart' },
|
||||
{ text: 'Sequence Diagram', link: '/syntax/sequenceDiagram' },
|
||||
{ text: 'Class Diagram', link: '/syntax/classDiagram' },
|
||||
{ text: 'State Diagram', link: '/syntax/stateDiagram' },
|
||||
{
|
||||
text: 'Entity Relationship Diagram',
|
||||
link: '/syntax/entityRelationshipDiagram',
|
||||
},
|
||||
{ text: 'User Journey', link: '/syntax/userJourney' },
|
||||
{ text: 'Gantt', link: '/syntax/gantt' },
|
||||
{ text: 'Pie Chart', link: '/syntax/pie' },
|
||||
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
|
||||
{ text: 'Gitgraph (Git) Diagram 🔥', link: '/syntax/gitGraph' },
|
||||
{ text: 'C4C Diagram (Context) Diagram 🦺⚠️', link: '/syntax/c4c' },
|
||||
{ text: 'Other Examples', link: '/syntax/examples' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarConfig() {
|
||||
return [
|
||||
{
|
||||
text: '⚙️ Deployment and Configuration',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Tutorials', link: '/config/Tutorials' },
|
||||
{ text: 'API-Usage', link: '/config/usage' },
|
||||
{ text: 'Mermaid API Configuration', link: '/config/setup/modules' },
|
||||
{ text: 'Directives', link: '/config/directives' },
|
||||
{ text: 'Theming', link: '/config/theming' },
|
||||
{ text: 'Accessibility', link: '/config/accessibility' },
|
||||
{ text: 'Mermaid CLI', link: '/config/mermaidCLI' },
|
||||
{ text: 'Advanced usage', link: '/config/n00b-advanced' },
|
||||
{ text: 'Configuration', link: '/config/configuration' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarMisc() {
|
||||
return [
|
||||
{
|
||||
text: '📚 Misc',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Use-Cases and Integrations', link: '/misc/integrations' },
|
||||
{ text: 'FAQ', link: '/misc/faq' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function sidebarCommunity() {
|
||||
return [
|
||||
{
|
||||
text: '🙌 Contributions and Community',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{ text: 'Overview for Beginners', link: '/community/n00b-overview' },
|
||||
{
|
||||
text: 'Development and Contribution',
|
||||
link: '/community/development',
|
||||
},
|
||||
{ text: 'Changelog', link: '/community/CHANGELOG' },
|
||||
{ text: 'Adding Diagrams', link: '/community/newDiagram' },
|
||||
{ text: 'Security', link: '/community/security' },
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
@ -1,33 +0,0 @@
|
||||
import shiki from 'shiki';
|
||||
|
||||
const MermaidExample = async (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
|
||||
const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
// console.log("==>",token.info);
|
||||
|
||||
if (token.info.trim() === 'mermaid-example') {
|
||||
let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
|
||||
code = code.replace('#2e3440ff', 'transparent');
|
||||
code = code.replace('#292D3E', 'transparent');
|
||||
|
||||
code =
|
||||
'<h5>Code:</h5>' +
|
||||
`<div class="language-mermaid">` +
|
||||
`<button class="copy"></button><span class="lang">mermaid</span>` +
|
||||
code +
|
||||
'</div>';
|
||||
|
||||
// return code;
|
||||
return `${code}
|
||||
<h5>Render:</h5>
|
||||
<Mermaid id="me${index}" graph="${encodeURIComponent(token.content)}"></Mermaid>`;
|
||||
}
|
||||
return fence(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
export default MermaidExample;
|
||||
@ -1,27 +0,0 @@
|
||||
:root {
|
||||
--vp-c-brand: #ff3670;
|
||||
--vp-c-brand-light: #ff5e8c;
|
||||
--vp-c-brand-lighter: #ff85a8;
|
||||
--vp-c-brand-lightest: #ff9bb7;
|
||||
--vp-c-brand-dark: #bd34fe;
|
||||
--vp-c-brand-darker: #9339bd;
|
||||
--vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
|
||||
}
|
||||
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #ff3670);
|
||||
|
||||
--vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #ff3670 50%);
|
||||
--vp-home-hero-image-filter: blur(72px);
|
||||
}
|
||||
|
||||
.vp-doc > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a.edit {
|
||||
margin: 12px;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import DefaultTheme from 'vitepress/theme';
|
||||
// @ts-ignore
|
||||
import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
|
||||
import './custom.css';
|
||||
|
||||
export default {
|
||||
...DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// register global components
|
||||
app.component('Mermaid', Mermaid);
|
||||
},
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
TypeDoc added this file to prevent GitHub Pages from using Jekyll. You can turn off this behavior by setting the `githubPages` option to false.
|
||||
140
docs/index.md
140
docs/index.md
@ -1,140 +0,0 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in package/mermaid/src/docs.
|
||||
|
||||
---
|
||||
|
||||
layout: home
|
||||
|
||||
title: Mermaid
|
||||
titleTemplate: Diagramming and charting tool
|
||||
|
||||
hero:
|
||||
name: Mermaid
|
||||
text: Diagramming and charting tool
|
||||
tagline: JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.
|
||||
image:
|
||||
src: /mermaid-logo.svg
|
||||
alt: Mermaid
|
||||
actions:
|
||||
\- theme: brand
|
||||
text: Get Started
|
||||
link: /intro/
|
||||
\- theme: alt
|
||||
text: View on GitHub
|
||||
link: https://github.com/mermaid-js/mermaid
|
||||
|
||||
features:
|
||||
|
||||
- title: ➕ Easy to use!
|
||||
details: Mermaid allows even non-programmers to easily create detailed and diagrams through the Mermaid Live Editor.
|
||||
- title: 🎥 Video Tutorials!
|
||||
details: Has video tutorials for beginners and advanced users.
|
||||
- title: 🏆 Award winner!
|
||||
details: Mermaid was nominated and won the JS Open Source Awards (2019) in the category "The most exciting use of technology"!!!
|
||||
- title: 🧩 Integrations available!
|
||||
details: Use Mermaid with your favorite applications, check out the list of Integrations and Usages of Mermaid.
|
||||
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { VPTeamMembers } from 'vitepress/theme'
|
||||
|
||||
const members = [
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/5837277?v=4',
|
||||
name: 'Knut Sveidqvist',
|
||||
title: 'Creator',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/knsv' },
|
||||
]
|
||||
},
|
||||
{
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1912783?v=4',
|
||||
name: 'Marc Faber',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://gdfaber.github.io/' },
|
||||
{ icon: 'linkedin', link: 'https://www.linkedin.com/in/marc-faber/' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/1564825?v=4',
|
||||
name: 'Nacho Orlandoni',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/IOrlandoni' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/6552521?v=4',
|
||||
name: 'Christian Klemm',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/klemmchr' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/12032557?v=4',
|
||||
name: 'Mindaugas Laganeckas',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/MindaugasLaganeckas' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/58763315?v=4',
|
||||
name: 'Neil Cuzon',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/NeilCuzon' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/19526120?v=4',
|
||||
name: 'Adrian Hall',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/spopida' },
|
||||
]
|
||||
}, {
|
||||
avatar: 'https://avatars.githubusercontent.com/u/53054099?v=4',
|
||||
name: 'Yash Singh',
|
||||
title: 'Developer',
|
||||
links: [
|
||||
{ icon: 'github', link: 'https://github.com/Yash-Singh1' },
|
||||
]
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<div class="vp-doc" >
|
||||
<h2 id="meet-the-team"> Meet The Team </h2>
|
||||
<VPTeamMembers size="small" :members="members" />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.image-container .image-src {
|
||||
margin: 1rem auto;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dark .image-src{
|
||||
filter: invert(1) hue-rotate(217deg) contrast(0.72);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.vp-doc {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
|
||||
.vp-doc h2 {
|
||||
margin: 48px 0 16px;
|
||||
border-top: 1px solid var(--vp-c-divider-light);
|
||||
padding-top: 24px;
|
||||
letter-spacing: -.02em;
|
||||
line-height: 32px;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
@ -1,46 +0,0 @@
|
||||
import { defineConfig, searchForWorkspaceRoot } from 'vite';
|
||||
import path from 'path';
|
||||
// @ts-ignore: still in alpha
|
||||
import { SearchPlugin } from 'vitepress-plugin-search';
|
||||
|
||||
const virtualModuleId = 'virtual:mermaid-config';
|
||||
const resolvedVirtualModuleId = '\0' + virtualModuleId;
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
SearchPlugin(),
|
||||
{
|
||||
// TODO: will be fixed in the next vitepress release.
|
||||
name: 'fix-virtual',
|
||||
|
||||
async resolveId(id) {
|
||||
if (id === virtualModuleId) {
|
||||
return resolvedVirtualModuleId;
|
||||
}
|
||||
},
|
||||
async load(this, id) {
|
||||
if (id === resolvedVirtualModuleId) {
|
||||
return `export default ${JSON.stringify({
|
||||
securityLevel: 'loose',
|
||||
startOnLoad: false,
|
||||
})};`;
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
mermaid: path.join(__dirname, '../../dist/mermaid.esm.min.mjs'), // Use this one to build
|
||||
},
|
||||
},
|
||||
server: {
|
||||
fs: {
|
||||
allow: [
|
||||
// search up for workspace root
|
||||
searchForWorkspaceRoot(process.cwd()),
|
||||
// Allow serving files from one level up to the project root
|
||||
path.join(__dirname, '..'),
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -31,15 +31,13 @@
|
||||
"build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
|
||||
"build": "pnpm clean; pnpm build:esbuild",
|
||||
"dev": "node .esbuild/serve.cjs",
|
||||
"predocs:build": "rimraf docs && pnpm docs:code",
|
||||
"docs:build": "rimraf ../../docs; ts-node-esm src/docs.mts",
|
||||
"docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --githubPages false --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
|
||||
"docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
|
||||
"docs:verify": "ts-node-esm src/docs.mts --verify",
|
||||
"docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
|
||||
"predocs:dev": "pnpm docs:code",
|
||||
"docs:dev": "vitepress dev src/docs",
|
||||
"predocs:bundle": "pnpm docs:code",
|
||||
"docs:bundle": "vitepress build src/docs",
|
||||
"docs:serve": "vitepress serve src/docs",
|
||||
"docs:build:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
|
||||
"docs:dev": "pnpm docs:build:vitepress && vitepress dev src/vitepress",
|
||||
"docs:bundle": "pnpm docs:build:vitepress && vitepress build src/vitepress",
|
||||
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
|
||||
"release": "pnpm build",
|
||||
"lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
|
||||
"lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
|
||||
|
||||
@ -45,10 +45,15 @@ const MERMAID_MAJOR_VERSION = (
|
||||
JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
|
||||
).split('.')[0];
|
||||
|
||||
const verifyOnly: boolean = process.argv.includes('--verify');
|
||||
const git: boolean = process.argv.includes('--git');
|
||||
const vitepress: boolean = process.argv.includes('--vitepress');
|
||||
const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
|
||||
|
||||
// These paths are from the root of the mono-repo, not from the
|
||||
// mermaid sub-directory
|
||||
const SOURCE_DOCS_DIR = 'src/docs';
|
||||
const FINAL_DOCS_DIR = '../../docs';
|
||||
const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
|
||||
|
||||
const AUTOGENERATED_TEXT = `> **Warning**
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
@ -60,9 +65,6 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
|
||||
|
||||
const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run pnpm docs:build after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
|
||||
|
||||
const verifyOnly: boolean = process.argv.includes('--verify');
|
||||
const git: boolean = process.argv.includes('--git');
|
||||
|
||||
// TODO: Read from .prettierrc?
|
||||
const prettierConfig: prettier.Config = {
|
||||
useTabs: false,
|
||||
@ -176,8 +178,17 @@ const transformMarkdown = (file: string) => {
|
||||
return [c];
|
||||
});
|
||||
|
||||
// Add the AUTOGENERATED_TEXT to the start of the file
|
||||
const transformed = `${AUTOGENERATED_TEXT}\n${remark.stringify(out)}`;
|
||||
let transformed = remark.stringify(out);
|
||||
if (!noHeader) {
|
||||
// Add the AUTOGENERATED_TEXT to the start of the file
|
||||
transformed = `${AUTOGENERATED_TEXT}\n${transformed}`;
|
||||
}
|
||||
|
||||
if (vitepress && file === 'src/docs/index.md') {
|
||||
// Skip transforming index if vitepress is enabled
|
||||
transformed = doc;
|
||||
}
|
||||
|
||||
const formatted = prettier.format(transformed, {
|
||||
parser: 'markdown',
|
||||
...prettierConfig,
|
||||
@ -206,6 +217,11 @@ const transformHtml = (filename: string) => {
|
||||
/<MERMAID_VERSION>/g,
|
||||
MERMAID_MAJOR_VERSION
|
||||
);
|
||||
|
||||
if (noHeader) {
|
||||
return fileContents;
|
||||
}
|
||||
|
||||
const jsdom = new JSDOM(fileContents);
|
||||
const htmlDoc = jsdom.window.document;
|
||||
const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT);
|
||||
@ -224,6 +240,10 @@ const transformHtml = (filename: string) => {
|
||||
};
|
||||
|
||||
const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
|
||||
globs.push('!**/dist');
|
||||
if (!vitepress) {
|
||||
globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
|
||||
}
|
||||
return await globby(globs, { dot: true });
|
||||
};
|
||||
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
const CustomMarkdown = (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
|
||||
if (token.info.trim() === 'warning') {
|
||||
return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'note') {
|
||||
return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'jison') {
|
||||
return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')}}</code></pre></div>`;
|
||||
}
|
||||
|
||||
return fence(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
export default CustomMarkdown;
|
||||
@ -1,14 +1,12 @@
|
||||
import { version } from '../../../package.json';
|
||||
import MermaidExample from './mermaid-markdown-all';
|
||||
import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
|
||||
import CustomMarkdown from './blocks-markdown';
|
||||
import { defineConfig } from 'vitepress';
|
||||
import { defineConfig, MarkdownOptions } from 'vitepress';
|
||||
|
||||
const allMarkdownTransformers = {
|
||||
const allMarkdownTransformers: MarkdownOptions = {
|
||||
config: async (md) => {
|
||||
MermaidMarkdown(md);
|
||||
await MermaidExample(md);
|
||||
CustomMarkdown(md);
|
||||
MermaidMarkdown(md);
|
||||
},
|
||||
};
|
||||
|
||||
@ -28,11 +26,6 @@ export default defineConfig({
|
||||
|
||||
sidebar: {
|
||||
'/': sidebarAll(),
|
||||
// "/intro/": sidebarIntro(),
|
||||
// "/syntax/": sidebarSyntax(),
|
||||
// "/config": sidebarConfig(),
|
||||
// "/misc/": sidebarMisc(),
|
||||
// "/community/": sidebarCommunity(),
|
||||
},
|
||||
},
|
||||
});
|
||||
@ -90,10 +83,6 @@ function sidebarAll() {
|
||||
...sidebarConfig(),
|
||||
...sidebarMisc(),
|
||||
...sidebarCommunity(),
|
||||
// {
|
||||
// text: "Generated",
|
||||
// items: [{ text: "modules", link: "docs/code/modules" }],
|
||||
// },
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -1,32 +1,55 @@
|
||||
import type { MarkdownRenderer } from 'vitepress';
|
||||
import shiki from 'shiki';
|
||||
|
||||
const MermaidExample = async (md) => {
|
||||
const fence = md.renderer.rules.fence.bind(md.renderer.rules);
|
||||
const MermaidExample = async (md: MarkdownRenderer) => {
|
||||
const defaultRenderer = md.renderer.rules.fence;
|
||||
|
||||
const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
|
||||
if (!defaultRenderer) {
|
||||
throw new Error('defaultRenderer is undefined');
|
||||
}
|
||||
|
||||
const highlighter = await shiki.getHighlighter({
|
||||
theme: 'material-palenight',
|
||||
langs: ['mermaid'],
|
||||
});
|
||||
|
||||
md.renderer.rules.fence = (tokens, index, options, env, slf) => {
|
||||
const token = tokens[index];
|
||||
// console.log("==>",token.info);
|
||||
|
||||
if (token.info.trim() === 'mermaid-example') {
|
||||
let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
|
||||
code = code.replace('#2e3440ff', 'transparent');
|
||||
code = code.replace('#292D3E', 'transparent');
|
||||
const highlight = highlighter
|
||||
.codeToHtml(token.content, { lang: 'mermaid' })
|
||||
.replace(/<span/g, '<span v-pre')
|
||||
.replace('#2e3440ff', 'transparent')
|
||||
.replace('#292D3E', 'transparent');
|
||||
|
||||
code =
|
||||
'<h5>Code:</h5>' +
|
||||
`<div class="language-mermaid">` +
|
||||
`<button class="copy"></button><span class="lang">mermaid</span>` +
|
||||
code +
|
||||
'</div>';
|
||||
|
||||
// return code;
|
||||
return `${code}
|
||||
<h5>Render:</h5>
|
||||
<Mermaid id="me${index}" graph="${encodeURIComponent(token.content)}"></Mermaid>`;
|
||||
return `<h5>Code:</h5>
|
||||
<div class="language-mermaid">
|
||||
<button class="copy"></button>
|
||||
<span class="lang">mermaid</span>
|
||||
${highlight}
|
||||
</div>
|
||||
<h5>Diagram:</h5>`;
|
||||
}
|
||||
return fence(tokens, index, options, env, slf);
|
||||
if (token.info.trim() === 'warning') {
|
||||
return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'note') {
|
||||
return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
|
||||
}
|
||||
|
||||
if (token.info.trim() === 'jison') {
|
||||
return `<div class="language-">
|
||||
<button class="copy"></button>
|
||||
<span class="lang">jison</span>
|
||||
<pre>
|
||||
<code>${token.content.replace(/</g, '<').replace(/>/g, '>')}</code>
|
||||
</pre>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
return defaultRenderer(tokens, index, options, env, slf);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
7
packages/mermaid/src/docs/config/setup/README.md
Normal file
7
packages/mermaid/src/docs/config/setup/README.md
Normal file
@ -0,0 +1,7 @@
|
||||
# mermaid
|
||||
|
||||
## Modules
|
||||
|
||||
- [config](modules/config.md)
|
||||
- [defaultConfig](modules/defaultConfig.md)
|
||||
- [mermaidAPI](modules/mermaidAPI.md)
|
||||
270
packages/mermaid/src/docs/config/setup/modules/config.md
Normal file
270
packages/mermaid/src/docs/config/setup/modules/config.md
Normal file
@ -0,0 +1,270 @@
|
||||
# Module: config
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="defaultconfig" name="defaultconfig"></a> defaultConfig
|
||||
|
||||
• `Const` **defaultConfig**: `MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:7
|
||||
|
||||
## Functions
|
||||
|
||||
### <a id="adddirective" name="adddirective"></a> addDirective
|
||||
|
||||
▸ **addDirective**(`directive`): `void`
|
||||
|
||||
Pushes in a directive to the configuration
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :---------- | :---- | :----------------------- |
|
||||
| `directive` | `any` | The directive to push in |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:191
|
||||
|
||||
---
|
||||
|
||||
### <a id="getconfig" name="getconfig"></a> getConfig
|
||||
|
||||
▸ **getConfig**(): `MermaidConfig`
|
||||
|
||||
## getConfig
|
||||
|
||||
| Function | Description | Type | Return Values |
|
||||
| --------- | ------------------------- | ----------- | ------------------------------ |
|
||||
| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
|
||||
|
||||
**Notes**: Returns **any** the currentConfig
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The currentConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:136
|
||||
|
||||
---
|
||||
|
||||
### <a id="getsiteconfig" name="getsiteconfig"></a> getSiteConfig
|
||||
|
||||
▸ **getSiteConfig**(): `MermaidConfig`
|
||||
|
||||
## getSiteConfig
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
|
||||
| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
|
||||
|
||||
**Notes**: Returns **any** values in siteConfig.
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The siteConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:96
|
||||
|
||||
---
|
||||
|
||||
### <a id="reset" name="reset"></a> reset
|
||||
|
||||
▸ **reset**(`config?`): `void`
|
||||
|
||||
## reset
|
||||
|
||||
| Function | Description | Type | Required | Values |
|
||||
| -------- | ---------------------------- | ----------- | -------- | ------ |
|
||||
| reset | Resets currentConfig to conf | Put Request | Required | None |
|
||||
|
||||
## conf
|
||||
|
||||
| Parameter | Description | Type | Required | Values |
|
||||
| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
|
||||
| conf | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
|
||||
|
||||
**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `config` | `MermaidConfig` | `siteConfig` | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:223
|
||||
|
||||
---
|
||||
|
||||
### <a id="sanitize" name="sanitize"></a> sanitize
|
||||
|
||||
▸ **sanitize**(`options`): `void`
|
||||
|
||||
## sanitize
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| -------- | -------------------------------------- | ----------- | ------ |
|
||||
| sanitize | Sets the siteConfig to desired values. | Put Request | None |
|
||||
|
||||
Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
|
||||
options in-place
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :-------- | :---- | :-------------------------------- |
|
||||
| `options` | `any` | The potential setConfig parameter |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:151
|
||||
|
||||
---
|
||||
|
||||
### <a id="saveconfigfrominitialize" name="saveconfigfrominitialize"></a> saveConfigFromInitialize
|
||||
|
||||
▸ **saveConfigFromInitialize**(`conf`): `void`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`void`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:75
|
||||
|
||||
---
|
||||
|
||||
### <a id="setconfig" name="setconfig"></a> setConfig
|
||||
|
||||
▸ **setConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
## setConfig
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
|
||||
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
|
||||
|
||||
**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
|
||||
keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
|
||||
corresponding siteConfig value.
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :-------------- | :-------------------------- |
|
||||
| `conf` | `MermaidConfig` | The potential currentConfig |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The currentConfig merged with the sanitized conf
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:113
|
||||
|
||||
---
|
||||
|
||||
### <a id="setsiteconfig" name="setsiteconfig"></a> setSiteConfig
|
||||
|
||||
▸ **setSiteConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
## setSiteConfig
|
||||
|
||||
| Function | Description | Type | Values |
|
||||
| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
|
||||
| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
|
||||
|
||||
**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
|
||||
to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
|
||||
will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
|
||||
function _Default value: At default, will mirror Global Config_
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type | Description |
|
||||
| :----- | :-------------- | :------------------------------------------ |
|
||||
| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
The new siteConfig
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:61
|
||||
|
||||
---
|
||||
|
||||
### <a id="updatecurrentconfig" name="updatecurrentconfig"></a> updateCurrentConfig
|
||||
|
||||
▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :------------ | :-------------- |
|
||||
| `siteCfg` | `MermaidConfig` |
|
||||
| `_directives` | `any`[] |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:14
|
||||
|
||||
---
|
||||
|
||||
### <a id="updatesiteconfig" name="updatesiteconfig"></a> updateSiteConfig
|
||||
|
||||
▸ **updateSiteConfig**(`conf`): `MermaidConfig`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :-------------- |
|
||||
| `conf` | `MermaidConfig` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`MermaidConfig`
|
||||
|
||||
#### Defined in
|
||||
|
||||
config.ts:79
|
||||
@ -0,0 +1,50 @@
|
||||
# Module: defaultConfig
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="configkeys" name="configkeys"></a> configKeys
|
||||
|
||||
• `Const` **configKeys**: `string`[]
|
||||
|
||||
#### Defined in
|
||||
|
||||
defaultConfig.ts:1869
|
||||
|
||||
---
|
||||
|
||||
### <a id="default" name="default"></a> default
|
||||
|
||||
• `Const` **default**: `Partial`<`MermaidConfig`\>
|
||||
|
||||
**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
|
||||
here](8.6.0_docs.md)].**
|
||||
|
||||
## **What follows are config instructions for older versions**
|
||||
|
||||
These are the default options which can be overridden with the initialization call like so:
|
||||
|
||||
**Example 1:**
|
||||
|
||||
```js
|
||||
mermaid.initialize({ flowchart: { htmlLabels: false } });
|
||||
```
|
||||
|
||||
**Example 2:**
|
||||
|
||||
```html
|
||||
<script>
|
||||
const config = {
|
||||
startOnLoad: true,
|
||||
flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
|
||||
securityLevel: 'loose',
|
||||
};
|
||||
mermaid.initialize(config);
|
||||
</script>
|
||||
```
|
||||
|
||||
A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
|
||||
A description of each option follows below.
|
||||
|
||||
#### Defined in
|
||||
|
||||
defaultConfig.ts:33
|
||||
57
packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md
Normal file
57
packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md
Normal file
@ -0,0 +1,57 @@
|
||||
# Module: mermaidAPI
|
||||
|
||||
## References
|
||||
|
||||
### <a id="default" name="default"></a> default
|
||||
|
||||
Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
|
||||
|
||||
## Variables
|
||||
|
||||
### <a id="mermaidapi" name="mermaidapi"></a> mermaidAPI
|
||||
|
||||
• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `Promise`<`void`\> ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `container?`: `Element`) => `Promise`<`void`\> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }\>
|
||||
|
||||
#### Defined in
|
||||
|
||||
mermaidAPI.ts:485
|
||||
|
||||
## Functions
|
||||
|
||||
### <a id="decodeentities" name="decodeentities"></a> decodeEntities
|
||||
|
||||
▸ **decodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :------- |
|
||||
| `text` | `string` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
mermaidAPI.ts:72
|
||||
|
||||
---
|
||||
|
||||
### <a id="encodeentities" name="encodeentities"></a> encodeEntities
|
||||
|
||||
▸ **encodeEntities**(`text`): `string`
|
||||
|
||||
#### Parameters
|
||||
|
||||
| Name | Type |
|
||||
| :----- | :------- |
|
||||
| `text` | `string` |
|
||||
|
||||
#### Returns
|
||||
|
||||
`string`
|
||||
|
||||
#### Defined in
|
||||
|
||||
mermaidAPI.ts:46
|
||||
Loading…
x
Reference in New Issue
Block a user