Add metadata for diagrams #6453
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 6deb476 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@mermaid-js/examples
mermaid
@mermaid-js/layout-elk
@mermaid-js/mermaid-zenuml
@mermaid-js/parser
@mermaid-js/tiny
commit: |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #6453 +/- ##
==========================================
+ Coverage 3.82% 3.85% +0.02%
==========================================
Files 430 455 +25
Lines 44481 44772 +291
Branches 683 707 +24
==========================================
+ Hits 1701 1725 +24
- Misses 42780 43047 +267
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎ Awaiting the start of a new Argos build… |
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid: [autofix.ci] apply automated fixes
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid: [autofix.ci] apply automated fixes
* develop: docs: improve elk section of ER docs Fix formatting of ELK example in ERD + clarify usage
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid: chore: update E2E timings chore: Update permission for timings action chore: Fix PR action in e2e-timings chore: Fix branch in e2e-timings
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
aloisklink
approved these changes
Apr 17, 2025
There was a problem hiding this comment.
There's a couple of things I think we could improve in this PR, but I don't think anything is blocking (maybe other than splitting the changeset into two files?).
Awesome work! I think this would be pretty helpful! The next cool thing would be if we could get these examples into the mermaid.js.org docs site as well!
There was a problem hiding this comment.
suggestion(non-blocking): I think this is a good enough for a v1, but I would much rather store the examples as .mmd files instead (or even in .md files).
That way, us developers get to use syntax highlighting and Mermaid plugins in the IDE when using these examples.
Maybe a structure could work something like the following?
We have an index.ts file with the metadata, then a default.mmd file with the default diagram and all the other examples can have xxxx.mmd file names.
diff --git a/architecture/default.mmd b/architecture/default.mmd
new file mode 100644
index 000000000..8ea7afd46
--- /dev/null
+++ b/architecture/default.mmd
@@ -0,0 +1,14 @@
+---
+title: Basic System Architecture
+---
+architecture-beta
+ group api(cloud)[API]
+
+ service db(database)[Database] in api
+ service disk1(disk)[Storage] in api
+ service disk2(disk)[Storage] in api
+ service server(server)[Server] in api
+
+ db:L -- R:server
+ disk1:T -- B:server
+ disk2:T -- B:db
diff --git a/architecture/index.ts b/architecture/index.ts
new file mode 100644
index 000000000..5ab821ea9
--- /dev/null
+++ b/architecture/index.ts
@@ -0,0 +1,7 @@
+export default {
+ name: 'Architecture Diagram',
+ description: 'Visualize system architecture and components',
+ examples: [
+ // add some cool Vite script here to automatically load them from the `.mmd` file
+ ]
+};There was a problem hiding this comment.
Will check esbuild and vite loaders for markdown.
There was a problem hiding this comment.
esbuild and vite loaders
You can just do a ?raw import in Vite to import the .mmd as a string. And it should bundlify into the exact same bundle.
Having it in a markdown file would be even cooler, but then you'd have to parse it to ensure it's exactly in the correct format, e.g.
# Diagram Name
Diagram Description goes Here
## Examples
### Example Name Here (maybe the default one is the first one?)
Optional Example Description Here
```mermaid
info
%% My example here
```
### Second Example Name Here
Optional example description here
```mermaid
info
%% My second example here
```Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Alois Klink <alois@aloisklink.com>
Co-authored-by: Alois Klink <alois@aloisklink.com>
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid: Update packages/examples/tsconfig.json
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Co-authored-by: Alois Klink <alois@aloisklink.com>
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Co-authored-by: Alois Klink <alois@aloisklink.com>
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid: (110 commits) [autofix.ci] apply automated fixes chore: Change `mermaid` blocks to `mermaid-example` in docs chore: Remove duplicate `mermaid` blocks chore: update E2E timings [autofix.ci] apply automated fixes chore: Switch from `%%{init` to `config:` chore: Add details to e2e-timings chore: Ignore timeout domains [autofix.ci] apply automated fixes [autofix.ci] apply automated fixes Create neat-moose-compare.md chore: Add changeset updated tests modified description of showDataLabel in config schema and added it to docs fix(deps): update all major dependencies chore(deps): update peter-evans/create-pull-request digest to a7b20e1 fix(deps): update dependency dompurify to ^3.2.5 [autofix.ci] apply automated fixes Update integrations-community.md [autofix.ci] apply automated fixes ...
* develop: (189 commits) chore(deps): update dependency vite to v6.1.6 [security] corrected font size text docs(theme): fix table formatting by removing extra line between fontFamily and fontSize chore(deps): update dependency eslint-plugin-unicorn to v59 chore(deps): update dependency vite to v6.1.5 [security] docs(theme): document fontFamily customization in themeVariables chore(deps): update eslint chore(deps): update peter-evans/create-pull-request digest to 3b1f4bf chore(deps): update dependency vite to v6.1.5 [security] Added the changeset Deleted unused code Deleted unused method chore: update E2E timings added changeset and unit test fix(sequenceDiagram): allow empty message after colon (Fixes #6518) chore(deps): update wei/curl digest to 012398a `layout-elk` package documentation misleading version [autofix.ci] apply automated fixes code review - wording and removals [autofix.ci] apply automated fixes ...
* develop: (198 commits) Version Packages docs: Update changeset update in changeset updated validaor and tests to use treemap Updated parser to use treemap chore: Fail build in CI on type errors Version Packages Updated phpbb url to support 403 in lychee Updated lychee for working url phpbb.com resolve PR comment resolve PR comments chore: update E2E timings add changeset log warning when duplicate commit IDs are encountered Added updated chatgpt plugin url and removed failing url Added classes and outernodes in imperativestate Updated code as per suggestions fixed unwanted vitepress from lockfile Updated as per suggestions Added step to install pnpm and echo statements for debugging. ...
…into sidv/examples * 'sidv/examples' of https://github.com/mermaid-js/mermaid:
Co-authored-by: Alois Klink <alois@aloisklink.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📑 Summary
Adds title and descriptions and examples to all diagrams, so that tools like mermaid.live, editor plugins, etc can use examples provided by diagram authors rather than maintaining a different copy, which will have to be updated manually whenever there is a new diagram in mermaid.
📏 Design Decisions
Examples is an array, to facilitate adding different ones if the author wishes to.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.pnpm changesetand following the prompts. Changesets that add features should beminorand those that fix bugs should bepatch. Please prefix changeset messages withfeat:,fix:, orchore:.