diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml deleted file mode 100644 index ae9e0e4e..00000000 --- a/.github/workflows/stale.yml +++ /dev/null @@ -1,20 +0,0 @@ -name: Mark stale issues and pull requests - -on: - schedule: - - cron: '0 0 * * 4' - -jobs: - stale: - runs-on: ubuntu-latest - steps: - - uses: actions/stale@v8 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - exempt-issue-labels: 'retained' - exempt-pr-labels: 'retained' - stale-issue-message: 'This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days' - stale-pr-message: 'This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 30 days' - days-before-stale: 90 - days-before-close: 30 - days-before-pr-close: -1 diff --git a/.node-version b/.node-version index ee09fac7..48b14e6b 100644 --- a/.node-version +++ b/.node-version @@ -1 +1 @@ -v20.11.1 +20.14.0 diff --git a/.vscode/settings.json b/.vscode/settings.json index 5d2cb867..b02e495c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -19,6 +19,7 @@ "pako", "panzoom", "pzoom", + "roughjs", "Serde", "serdes", "tailwindcss", diff --git a/README.md b/README.md index a9656501..74685558 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)[![Netlify Status](https://api.netlify.com/api/v1/badges/27fa023d-7c73-4a3f-9791-b3b657a47100/deploy-status)](https://app.netlify.com/sites/mermaidjs/deploys) +[![Mermaid Live Editor](https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/detailed/2ckppp/master&style=flat&logo=cypress)](https://dashboard.cypress.io/projects/2ckppp/runs) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Netlify Status](https://api.netlify.com/api/v1/badges/27fa023d-7c73-4a3f-9791-b3b657a47100/deploy-status)](https://app.netlify.com/sites/mermaidjs/deploys) # Contributors are welcome! diff --git a/cypress/e2e/diagramUpdate.spec.ts b/cypress/e2e/diagramUpdate.spec.ts index b8326bc3..377b365f 100644 --- a/cypress/e2e/diagramUpdate.spec.ts +++ b/cypress/e2e/diagramUpdate.spec.ts @@ -69,7 +69,7 @@ A & B & C & D & E --> F & G & K & Z & i`); }); it('supports commenting code out/in', () => { - cy.get('#editor').contains('Car').click(); + cy.get('#editor').contains('Car').click({ force: true }); cy.get('#editor').get('textarea').type(`${cmd}/`, { force: true }); cy.get('#view').contains('Car').should('not.exist'); diff --git a/package.json b/package.json index 2f54116e..7d090ef4 100644 --- a/package.json +++ b/package.json @@ -23,10 +23,11 @@ }, "devDependencies": { "@cypress/snapshot": "2.1.7", - "@sveltejs/adapter-static": "3.0.1", - "@sveltejs/kit": "2.5.4", + "@fortawesome/fontawesome-free": "^6.5.1", + "@sveltejs/adapter-static": "3.0.2", + "@sveltejs/kit": "2.5.16", "@sveltejs/vite-plugin-svelte": "^3.0.1", - "@testing-library/svelte": "4.1.0", + "@testing-library/svelte": "4.2.3", "@types/lodash-es": "^4.17.12", "@types/pako": "2.0.3", "@types/uuid": "9.0.8", @@ -38,27 +39,27 @@ "chai": "^4.3.7", "cssnano": "^6.0.0", "cypress": "12.17.4", - "cypress-localstorage-commands": "2.2.5", + "cypress-localstorage-commands": "2.2.6", "eslint": "8.57.0", "eslint-config-prettier": "9.1.0", - "eslint-plugin-cypress": "2.15.1", + "eslint-plugin-cypress": "2.15.2", "eslint-plugin-es": "^4.1.0", "eslint-plugin-no-only-tests": "^3.1.0", "eslint-plugin-postcss-modules": "^2.0.0", "eslint-plugin-svelte": "^2.35.1", "eslint-plugin-tailwindcss": "^3.13.1", "eslint-plugin-unicorn": "^50.0.1", - "eslint-plugin-vitest": "^0.3.20", + "eslint-plugin-vitest": "^0.5.0", "esserializer": "^1.3.11", "husky": "^8.0.3", "jsdom": "^21.1.2", "lint-staged": "^15.2.0", "node-html-parser": "^6.1.5", "postcss": "^8.4.33", - "postcss-load-config": "5.0.3", + "postcss-load-config": "5.1.0", "prettier": "^3.1.0", "prettier-plugin-svelte": "^3.1.2", - "prettier-plugin-tailwindcss": "^0.5.11", + "prettier-plugin-tailwindcss": "^0.6.0", "svelte": "^4.2.8", "svelte-preprocess": "^5.1.3", "tailwindcss": "^3.4.1", @@ -69,16 +70,18 @@ "vitest-dom": "^0.1.1" }, "dependencies": { + "@mermaid-js/mermaid-zenuml": "^0.2.0", "daisyui": "2.52.0", "dayjs": "^1.11.7", "js-base64": "3.7.7", "lodash-es": "^4.17.21", - "mermaid": "10.9.0", - "monaco-editor": "0.47.0", + "mermaid": "10.9.1", + "monaco-editor": "0.49.0", "pako": "2.1.0", "plausible-tracker": "^0.3.8", "random-word-slugs": "0.1.7", "svg-pan-zoom": "3.6.1", + "svg2roughjs": "^3.2.0", "uuid": "9.0.1" }, "lint-staged": { @@ -88,7 +91,7 @@ ] }, "volta": { - "node": "18.19.1", + "node": "18.20.3", "yarn": "1.22.22" }, "engines": { diff --git a/src/app.html b/src/app.html index 61584eca..827bd6bc 100644 --- a/src/app.html +++ b/src/app.html @@ -15,12 +15,6 @@ - %sveltekit.head% diff --git a/src/app.postcss b/src/app.postcss index 73ce33f0..528b5111 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -1,3 +1,5 @@ +@import '@fortawesome/fontawesome-free/css/all.min.css'; + @tailwind base; @tailwind components; @tailwind utilities; @@ -8,3 +10,8 @@ .action-btn { @apply btn btn-primary; } +#graph-div sub, +#graph-div sup { + position: initial; + vertical-align: revert; +} diff --git a/src/lib/components/Actions.svelte b/src/lib/components/Actions.svelte index 3cd45914..9c0bd1c4 100644 --- a/src/lib/components/Actions.svelte +++ b/src/lib/components/Actions.svelte @@ -8,6 +8,9 @@ import { logEvent } from '$lib/util/stats'; import dayjs from 'dayjs'; import { toBase64 } from 'js-base64'; + import { version as FAVersion } from '@fortawesome/fontawesome-free/package.json'; + + const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}/css/all.min.css`; const { krokiRendererUrl, rendererUrl } = env; type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void; @@ -28,7 +31,10 @@ const svgString = svg.outerHTML .replaceAll('
', '
') .replaceAll(/]*)>/g, (m, g: string) => ``); - return toBase64(svgString); + + return toBase64(` + +${svgString}`); }; const exportImage = async (event: Event, exporter: Exporter) => { @@ -72,15 +78,6 @@ const getSvgElement = () => { const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement; svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink'); - const fontAwesomeCdnUrl = [...document.head.querySelectorAll('link')] - .map((link) => link.href) - .find((url) => url.includes('font-awesome')); - if (fontAwesomeCdnUrl == null) { - return svgElement; - } - const styleElement = document.createElement('style'); - styleElement.textContent = `@import url("${fontAwesomeCdnUrl}");'`; - svgElement.prepend(styleElement); return svgElement; }; diff --git a/src/lib/components/Preset.svelte b/src/lib/components/Preset.svelte index fb313dae..37bee294 100644 --- a/src/lib/components/Preset.svelte +++ b/src/lib/components/Preset.svelte @@ -141,6 +141,30 @@ C --> db D --> C style m fill:#d6d,stroke:#333,stroke-width:4px + `, + ZenUML: `zenuml + title Order Service + @Actor Client #FFEBE6 + @Boundary OrderController #0747A6 + @EC2 <> OrderService #E3FCEF + group BusinessService { + @Lambda PurchaseService + @AzureFunction InvoiceService + } + + @Starter(Client) + // \`POST /orders\` + OrderController.post(payload) { + OrderService.create(payload) { + order = new Order(payload) + if(order != null) { + par { + PurchaseService.createPO(order) + InvoiceService.createInvoice(order) + } + } + } + } ` }; @@ -154,7 +178,7 @@ }; // Adding in this array will add an icon to the preset menu - const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block']; + const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'ZenUML']; const diagramOrder: SampleTypes[] = [ 'Flow', 'Sequence', @@ -168,7 +192,8 @@ 'Mindmap', 'QuadrantChart', 'XYChart', - 'Block' + 'Block', + 'ZenUML' ]; diff --git a/src/lib/components/View.svelte b/src/lib/components/View.svelte index db9efa1f..f7c70688 100644 --- a/src/lib/components/View.svelte +++ b/src/lib/components/View.svelte @@ -1,17 +1,19 @@