Update package.json

To upgrade your code to use the latest version of Mermaid, the primary updates involve ensuring that Mermaid is correctly imported and configured in the application
This commit is contained in:
Yuva 2024-12-31 13:29:46 +05:30 committed by GitHub
parent 11c8cc1e19
commit 179ec0c562
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,207 +1,56 @@
"mermaid": "^10.0.0"
yarn add mermaid@latest
import mermaid from 'mermaid';
mermaid.initialize({
startOnLoad: true, // Automatically render diagrams on page load
theme: 'base', // Choose your preferred theme (e.g., 'base', 'forest', 'dark')
securityLevel: 'strict', // Adjust security settings
flowchart: {
curve: 'basis' // Define curve type for flowcharts
}
});
const renderMermaidDiagram = (id, definition) => {
mermaid.render(id, definition, (svgCode) => {
document.getElementById(id).innerHTML = svgCode;
});
};
const diagramDefinition = `graph TD;
A-->B;
A-->C;
B-->D;
C-->D;`;
renderMermaidDiagram('mermaid-container', diagramDefinition);
import 'mermaid/dist/mermaid.min.css';
module.exports = {
module: {
rules: [
{
"name": "marktext",
"version": "0.17.1",
"homepage": "https://github.com/marktext/marktext/",
"description": "Next generation markdown editor",
"license": "MIT",
"main": "./dist/electron/main.js",
"scripts": {
"release": "echo 'Please run \"build\" or \"release:{linux,mac,win}\"' && exit 1",
"release:linux": "node .electron-vue/build.js && electron-builder build --linux",
"release:mac": "node .electron-vue/build.js && electron-builder build --mac",
"release:win": "node .electron-vue/build.js && electron-builder build --win",
"build": "node .electron-vue/build.js && electron-builder",
"build:bin": "node .electron-vue/build.js && electron-builder --dir",
"build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
"build:dev": "node .electron-vue/build.js",
"dev": "cross-env node .electron-vue/dev-runner.js",
"e2e": "yarn run pack && cross-env MARKTEXT_EXIT_ON_ERROR=1 playwright test -c test/e2e/playwright.config.js test/e2e",
"lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src test",
"lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test",
"pack": "yarn run pack:main && yarn run pack:renderer",
"pack:main": "cross-env NODE_ENV=production webpack --progress --config .electron-vue/webpack.main.config.js",
"pack:renderer": "cross-env NODE_ENV=production webpack --progress --config .electron-vue/webpack.renderer.config.js",
"postinstall": "node .electron-vue/postinstall.js && yarn run rebuild && yarn run lint:fix",
"test": "yarn run unit && yarn run e2e",
"test:specs": "node -r esm test/specs/commonMark/run.spec.js && node -r esm test/specs/gfm/run.spec.js",
"unit": "cross-env NODE_ENV=test ELECTRON_DISABLE_SECURITY_WARNINGS=true karma start test/unit/karma.conf.js",
"preinstall": "node .electron-vue/preinstall.js",
"build:muya": "cd src/muya && webpack --progress --config webpack.config.js",
"release:muya": "yarn run build:muya && cd src/muya && yarn publish",
"rebuild": "electron-rebuild -f",
"gen-third-party": "node tools/generateThirdPartyLicense.js",
"validate-licenses": "node tools/validateLicenses.js",
"deobfuscateStackTrace": "node tools/deobfuscateStackTrace.js"
},
"dependencies": {
"@electron/remote": "^2.0.8",
"@hfelix/electron-localshortcut": "^4.0.1",
"@marktext/file-icons": "^1.0.6",
"@octokit/rest": "^18.12.0",
"arg": "^5.0.1",
"axios": "^0.26.1",
"ced": "^2.0.0",
"chokidar": "^3.5.3",
"codemirror": "^5.65.2",
"command-exists": "^1.2.9",
"dayjs": "^1.11.0",
"dom-autoscroller": "^2.3.4",
"dompurify": "^2.3.6",
"dragula": "^3.7.3",
"electron-log": "^4.4.6",
"electron-store": "^8.0.1",
"electron-window-state": "^5.0.3",
"element-resize-detector": "^1.2.4",
"element-ui": "^2.15.8",
"execall": "^2.0.0",
"fast-deep-equal": "^3.1.3",
"flowchart.js": "^1.17.1",
"fontmanager-redux": "^1.1.0",
"fs-extra": "^10.0.1",
"fuzzaldrin": "^2.1.0",
"github-markdown-css": "^3.0.1",
"html-tags": "^3.2.0",
"iconv-lite": "^0.6.3",
"iso-639-1": "^2.1.13",
"joplin-turndown-plugin-gfm": "^1.0.12",
"katex": "^0.15.3",
"keytar": "^7.9.0",
"mermaid": "^10.0.0",
"minizlib": "^2.1.2",
"native-keymap": "^3.3.0",
"plist": "^3.0.5",
"popper.js": "^1.16.1",
"prismjs": "^1.27.0",
"snabbdom": "^3.4.0",
"snabbdom-to-html": "^7.0.0",
"source-map-support": "^0.5.21",
"turndown": "^7.1.1",
"underscore": "^1.13.2",
"unsplash-js": "^7.0.15",
"vega": "^5.22.1",
"vega-embed": "^6.20.8",
"vega-lite": "^5.2.0",
"vscode-ripgrep": "^1.12.1",
"vue": "^2.6.14",
"vue-electron": "^1.0.6",
"vue-router": "^3.5.3",
"vuex": "^3.6.2",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@babel/core": "^7.17.9",
"@babel/eslint-parser": "^7.17.0",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-export-default-from": "^7.16.7",
"@babel/plugin-proposal-function-bind": "^7.16.7",
"@babel/plugin-syntax-class-properties": "^7.12.13",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-runtime": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/register": "^7.17.7",
"@babel/runtime": "^7.17.9",
"@markedjs/html-differ": "^3.0.4",
"@playwright/test": "^1.21.0",
"babel-loader": "^8.2.4",
"babel-plugin-component": "^1.1.1",
"babel-plugin-istanbul": "^6.1.1",
"cfonts": "^2.10.1",
"chai": "^4.3.6",
"chalk": "^4.1.2",
"cheerio": "^1.0.0-rc.10",
"copy-webpack-plugin": "^10.2.4",
"cross-env": "^7.0.3",
"css-loader": "^6.7.1",
"del": "^6.0.0",
"devtron": "^1.4.0",
"dotenv": "^16.0.0",
"electron": "^18.0.4",
"electron-builder": "^23.0.6",
"electron-devtools-installer": "^3.2.0",
"electron-rebuild": "^3.2.7",
"electron-updater": "^5.0.2",
"eslint": "^8.13.0",
"eslint-config-standard": "^16.0.3",
"eslint-friendly-formatter": "^4.0.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-html": "^6.2.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-standard": "^4.1.0",
"eslint-plugin-vue": "^8.6.0",
"eslint-webpack-plugin": "^3.1.1",
"esm": "^3.2.25",
"file-loader": "^6.2.0",
"git-revision-webpack-plugin": "^5.0.0",
"html-webpack-plugin": "^5.5.0",
"imports-loader": "^0.8.0",
"karma": "^6.3.18",
"karma-chai": "^0.1.0",
"karma-coverage": "^2.2.0",
"karma-electron": "^7.1.0",
"karma-mocha": "^2.0.1",
"karma-sourcemap-loader": "^0.3.8",
"karma-spec-reporter": "0.0.34",
"karma-webpack": "^5.0.0",
"license-checker": "^25.0.1",
"listr": "^0.14.3",
"marked": "^1.2.9",
"mini-css-extract-plugin": "^2.6.0",
"mocha": "^9.2.2",
"node-fetch": "^2.6.7",
"node-loader": "^2.0.0",
"path-browserify": "^1.0.1",
"playwright": "^1.21.0",
"postcss": "^8.4.12",
"postcss-loader": "^6.2.1",
"postcss-preset-env": "^7.4.3",
"raw-loader": "^4.0.2",
"require-dir": "^1.2.0",
"stacktrace-parser": "^0.1.10",
"style-loader": "^3.3.1",
"svg-sprite-loader": "^6.0.11",
"svgo": "^2.8.0",
"svgo-loader": "^3.0.0",
"to-string-loader": "^1.2.0",
"url-loader": "^4.1.1",
"vue-html-loader": "^1.2.4",
"vue-loader": "^15.9.8",
"vue-style-loader": "^4.1.3",
"vue-template-compiler": "^2.6.14",
"webpack": "^5.72.0",
"webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.8.1",
"webpack-hot-middleware": "^2.25.1",
"webpack-merge": "^5.8.0"
},
"resolutions": {
"node-abi": "^3.8.0",
"node-addon-api": "^4.3.0"
},
"repository": {
"type": "git",
"url": "git@github.com:marktext/marktext.git"
},
"bugs": {
"url": "https://github.com/marktext/marktext/issues"
},
"author": {
"name": "Jocs",
"email": "ransixi@gmail.com",
"url": "https://github.com/Jocs"
},
"maintainer": [
{
"name": "Jocs",
"email": "ransixi@gmail.com",
"url": "https://github.com/Jocs"
},
{
"name": "Felix Häusler",
"email": "hfelix@protonmail.ch",
"url": "https://github.com/fxha"
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
}
]
}
};
import mermaid from 'mermaid';
mermaid.initialize({
startOnLoad: true,
theme: 'default',
securityLevel: 'loose'
});
document.addEventListener('DOMContentLoaded', () => {
const diagram = `
graph TD
A[Start] --> B{Decision}
B -->|Yes| C[End]
B -->|No| D[Continue]
`;
mermaid.render('mermaid-diagram', diagram, (svgCode) => {
document.getElementById('output').innerHTML = svgCode;
});
});