forkless/mermaid-live-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Simplify docs button

Browse Source
This commit is contained in:
Sidharth Vinod
2025-03-14 11:03:10 -07:00
parent f951ad055b
commit 02ef7eab78
10 changed files with 167 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.cjs
+10 -1
View File
@@ -11,7 +11,15 @@ module.exports = {
'plugin:svelte/prettier',
'prettier'
],
plugins: ['tailwindcss', '@typescript-eslint', 'es', 'vitest', 'no-only-tests', 'unicorn'],
plugins: [
'tailwindcss',
'@typescript-eslint',
'es',
'vitest',
'no-only-tests',
'sort-keys',
'unicorn'
],
ignorePatterns: [
'docs/*',
'*.cjs',
@@ -54,6 +62,7 @@ module.exports = {
es2020: true
},
rules: {
'sort-keys': 'off',
'@typescript-eslint/ban-ts-comment': [
'error',
{
package.json
+1
View File
@@ -52,6 +52,7 @@
"eslint-plugin-es": "^4.1.0",
"eslint-plugin-no-only-tests": "^3.1.0",
"eslint-plugin-postcss-modules": "^2.0.0",
"eslint-plugin-sort-keys": "^2.3.5",
"eslint-plugin-svelte": "^2.45.1",
"eslint-plugin-tailwindcss": "^3.13.1",
"eslint-plugin-unicorn": "^50.0.1",
src/lib/components/DiagramDocButton.svelte
+106
View File
@@ -0,0 +1,106 @@
<script lang="ts">
import { Button } from '$/components/ui/button';
import type { DocumentationConfig } from '$/types';
import { standardizeDiagramType } from '$/util/mermaid';
import { stateStore } from '$/util/state';
import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
const docURLBase = 'https://mermaid.js.org';
const docMap = {
architecture: {
code: '/syntax/architecture.html'
},
block: {
code: '/syntax/block.html'
},
c4: {
code: '/syntax/c4.html'
},
class: {
code: '/syntax/classDiagram.html',
config: '/syntax/classDiagram.html#configuration'
},
er: {
code: '/syntax/entityRelationshipDiagram.html',
config: '/syntax/entityRelationshipDiagram.html#styling'
},
flowchart: {
code: '/syntax/flowchart.html',
config: '/syntax/flowchart.html#configuration'
},
gantt: {
code: '/syntax/gantt.html',
config: '/syntax/gantt.html#configuration'
},
gitGraph: {
code: '/syntax/gitgraph.html',
config: '/syntax/gitgraph.html#gitgraph-specific-configuration-options'
},
journey: {
code: '/syntax/userJourney.html'
},
kanban: {
code: '/syntax/kanban.html',
config: '/syntax/kanban.html#configuration-options'
},
mindmap: {
code: '/syntax/mindmap.html'
},
packet: {
code: '/syntax/packet.html',
config: '/config/schema-docs/config-defs-packet-diagram-config.html'
},
pie: {
code: '/syntax/pie.html',
config: '/syntax/pie.html#configuration'
},
quadrantChart: {
code: '/syntax/quadrantChart.html',
config: '/syntax/quadrantChart.html#chart-configurations'
},
requirement: {
code: '/syntax/requirementDiagram.html'
},
sankey: {
code: '/syntax/sankey.html',
config: '/syntax/sankey.html#configuration'
},
sequence: {
code: '/syntax/sequenceDiagram.html',
config: '/syntax/sequenceDiagram.html#configuration'
},
stateDiagram: {
code: '/syntax/stateDiagram.html'
},
timeline: {
code: '/syntax/timeline.html',
config: '/syntax/timeline.html#themes'
},
xychart: {
code: '/syntax/xyChart.html',
config: '/syntax/xyChart.html#chart-configurations'
},
zenuml: {
code: '/syntax/zenuml.html'
}
} as const satisfies DocumentationConfig;
const doc = $derived.by(() => {
const { editorMode, diagramType } = $stateStore;
if (!diagramType) {
return { key: '', url: docURLBase };
}
const key = standardizeDiagramType(diagramType);
const docConfig = docMap[key] ?? { code: '' };
const url = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
return { key, url };
});
</script>
<Button
variant="ghost"
href={doc.url}
title="View documentation for {doc.key.replace('Diagram', '')} diagram">
<BookIcon />
Docs
</Button>
src/lib/components/Preset.svelte
+1 -3
View File
@@ -95,7 +95,7 @@
Popularisation
British popular psychology author Tony Buzan
Research
On effectivness<br/>and features
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
@@ -201,8 +201,6 @@ packet-beta
logEvent('loadSampleDiagram', { diagramType });
};
// Adding in this array will add an icon to the preset menu
const newDiagrams: SampleTypes[] = ['QuadrantChart', 'XYChart', 'Block', 'Packet'];
const diagramOrder: SampleTypes[] = [
'Flow',
'Sequence',
src/lib/types.d.ts
Vendored
+1
View File
@@ -38,6 +38,7 @@ export interface State {
export interface ValidatedState extends State {
editorMode: EditorMode;
diagramType?: string;
error?: Error;
errorMarkers: MarkerData[];
serialized: string;
src/lib/util/mermaid.ts
+19 -1
View File
@@ -18,6 +18,24 @@ export const render = async (
return await mermaid.render(id, code);
};
export const parse = async (code: string): Promise<unknown> => {
export const parse = async (code: string) => {
return await mermaid.parse(code);
};
export const standardizeDiagramType = (diagramType: string) => {
switch (diagramType) {
case 'class':
case 'classDiagram': {
return 'classDiagram';
}
case 'graph':
case 'flowchart':
case 'flowchart-elk':
case 'flowchart-v2': {
return 'flowchart';
}
default: {
return diagramType;
}
}
};
src/lib/util/state.ts
+2 -1
View File
@@ -65,7 +65,8 @@ const processState = async (state: State) => {
// No changes should be done to fields part of `state`.
try {
processed.serialized = serializeState(state);
await parse(state.code);
const { diagramType } = await parse(state.code);
processed.diagramType = diagramType;
JSON.parse(state.mermaid);
} catch (error) {
processed.error = error as Error;
src/routes/edit/+page.svelte
+5 -90
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import DiagramDocButton from '$/components/DiagramDocButton.svelte';
import History from '$/components/History/History.svelte';
import McTooltip from '$/components/MCTooltip.svelte';
import PanZoomToolbar from '$/components/PanZoomToolbar.svelte';
@@ -16,96 +17,19 @@
import Navbar from '$lib/components/Navbar.svelte';
import Preset from '$lib/components/Preset.svelte';
import View from '$lib/components/View.svelte';
import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
import type { EditorMode, Tab, ValidatedState } from '$lib/types';
import { stateStore, updateCodeStore, urlsStore } from '$lib/util/state';
import { initHandler } from '$lib/util/util';
import { onMount } from 'svelte';
import BookIcon from '~icons/material-symbols/book-2-outline-rounded';
import CodeIcon from '~icons/material-symbols/code-blocks-outline';
import HistoryIcon from '~icons/material-symbols/history';
import GearIcon from '~icons/material-symbols/settings-outline-rounded';
const panZoomState = new PanZoomState();
const docURLBase = 'https://mermaid.js.org';
const docMap: DocumentationConfig = {
graph: {
code: '/syntax/.html',
config: '/syntax/.html#configuration'
},
flowchart: {
code: '/syntax/flowchart.html',
config: '/syntax/flowchart.html#configuration'
},
sequenceDiagram: {
code: '/syntax/sequenceDiagram.html',
config: '/syntax/sequenceDiagram.html#configuration'
},
classDiagram: {
code: '/syntax/classDiagram.html',
config: '/syntax/classDiagram.html#configuration'
},
'stateDiagram-v2': {
code: '/syntax/stateDiagram.html'
},
gantt: {
code: '/syntax/gantt.html',
config: '/syntax/gantt.html#configuration'
},
pie: {
code: '/syntax/pie.html',
config: '/syntax/pie.html#configuration'
},
erDiagram: {
code: '/syntax/entityRelationshipDiagram.html',
config: '/syntax/entityRelationshipDiagram.html#styling'
},
journey: {
code: '/syntax/userJourney.html'
},
gitGraph: {
code: '/syntax/gitgraph.html',
config: '/syntax/gitgraph.html#gitgraph-specific-configuration-options'
},
quadrantChart: {
code: '/syntax/quadrantChart.html',
config: '/syntax/quadrantChart.html#chart-configurations'
},
requirementDiagram: {
code: '/syntax/requirementDiagram.html'
},
C4Context: {
code: '/syntax/c4.html'
},
mindmap: {
code: '/syntax/mindmap.html'
},
timeline: {
code: '/syntax/timeline.html',
config: '/syntax/timeline.html#themes'
},
zenuml: {
code: '/syntax/zenuml.html'
},
'sankey-beta': {
code: '/syntax/sankey.html',
config: '/syntax/sankey.html#configuration'
},
'xychart-beta': {
code: '/syntax/xyChart.html',
config: '/syntax/xyChart.html#chart-configurations'
}
};
let docURL = $state(docURLBase);
let activeTabID = $state('code');
let docKey = $state('');
stateStore.subscribe(({ code, editorMode }: ValidatedState) => {
stateStore.subscribe(({ editorMode }: ValidatedState) => {
activeTabID = editorMode;
const codeTypeMatch = /(\S+)\s/.exec(code);
if (codeTypeMatch && codeTypeMatch.length > 1) {
docKey = codeTypeMatch[1];
const docConfig = docMap[docKey] ?? { code: '' };
docURL = docURLBase + (docConfig[editorMode] ?? docConfig.code ?? '');
}
});
const tabSelectHandler = (tab: Tab) => {
@@ -159,17 +83,8 @@
{activeTabID}
isClosable={false}>
{#snippet actions()}
<div class="flex flex-row items-center">
<Button
variant="ghost"
href={docURL}
title="View documentation for {docKey.replace('Diagram', '')} diagram">
<BookIcon class="mr-1" />
Docs
</Button>
</div>
<DiagramDocButton />
{/snippet}
<Editor />
</Card>
vite.config.js
+14 -1
View File
@@ -3,13 +3,26 @@ import { svelteTesting } from '@testing-library/svelte/vite';
import Icons from 'unplugin-icons/vite';
import { defineConfig } from 'vitest/config';
/**
* HMR creates state inconsistencies, so we always reload the page.
* @type {import('vite').PluginOption} PluginOption
*/
const alwaysFullReload = {
name: 'always-full-reload',
handleHotUpdate({ server }) {
server.ws.send({ type: 'full-reload' });
return [];
}
};
export default defineConfig({
plugins: [
sveltekit(),
svelteTesting(),
Icons({
compiler: 'svelte'
})
}),
alwaysFullReload
],
envPrefix: 'MERMAID_',
optimizeDeps: { include: ['mermaid'] },
yarn.lock
+8 -1
View File
@@ -3195,6 +3195,13 @@ eslint-plugin-postcss-modules@^2.0.0:
postcss-modules-scope "^3.0.0"
postcss-modules-values "^4.0.0"
eslint-plugin-sort-keys@^2.3.5:
version "2.3.5"
resolved "https://registry.yarnpkg.com/eslint-plugin-sort-keys/-/eslint-plugin-sort-keys-2.3.5.tgz#f28d5cd2f5ee0fc5192f5ff879f56f8516aac57b"
integrity sha512-2j/XKQ9sNJwK8kIp/U0EvuF6stS6/8aIc53/NskE4C5NRNh4dt3xzbZyOdrVC11cTH6Zo59/pdzA0Kb+2fQGWg==
dependencies:
natural-compare "1.4.0"
eslint-plugin-svelte@^2.45.1:
version "2.46.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz#22691c8685420cd4eabf0cbaa31a0cfb8395595b"
@@ -4795,7 +4802,7 @@ nanoid@^3.3.7, nanoid@^3.3.8:
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.8.tgz#b1be3030bee36aaff18bacb375e5cce521684baf"
integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
natural-compare@^1.4.0:
natural-compare@1.4.0, natural-compare@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==