fangface-hub31 downloadsObsidian plugin to assist editing Mermaid code blocks
An Obsidian plugin base that helps users edit Mermaid code blocks quickly.
mermaid code block.TD or LR).%% @meta in Mermaid code blocks and apply styles to rendered diagrams.You can embed style metadata in Mermaid line comments using %% @meta.
%% @meta data-align:center; data-width:80%; data-margin:0 auto;
flowchart TD
A[Start] --> B[End]
Syntax rules:
%% @meta.key:value; pairs.;.Supported metadata:
| Metadata | Meaning | Example |
|---|---|---|
data-align |
Horizontal alignment override for SVG placement. | left, center, right |
data-width |
SVG width inside the container. When specified, responsive max-width: 100% is disabled for that diagram. |
80%, 600px, original |
data-margin |
Outer margin for the diagram container. | 12px, 0 auto |
data-background |
Background color for the diagram container. | #fff |
data-zoom |
Diagram zoom scale. | 1.2 |
data-interactive |
Adds data-interactive attribute to the rendered container. |
true |
data-theme |
Adds data-theme attribute to the rendered container. |
dark |
Notes:
data-width:original keeps Mermaid's original width behavior.data-theme and data-interactive are exposed as HTML data-* attributes.npm install
npm run build
npm run build creates a release artifact with debug logging suppressed.
To build with debug logging enabled:
npm run build:debug
Watch mode:
npm run dev
npm run dev keeps debug logging enabled for diagnostics while developing.
Copy manifest.json and main.js to your Obsidian vault plugin folder.
If present, copy styles.css as well.
Run lint checks:
npm run lint
Run lint checks with auto-fix:
npm run lint:fix
npm run lint:fix only applies ESLint auto-fixes and does not update version files.
Verify manifest.json fields: id, name, author, description, and version.
Run npm run lint:fix.
Run npm run lint to verify the plugin meets Obsidian guidelines.
Bump the version based on the type of release:
npm run version:patchnpm run version:minornpm run version:majorThis updates package.json, manifest.json, and versions.json together.
Run npm run build to generate main.js.
Create a GitHub Release with the same tag as the manifest.json version.
Attach the following 3 files as release assets:
manifest.jsonmain.jsstyles.css (optional, when the file exists)This project follows Semantic Versioning (MAJOR.MINOR.PATCH).
npm run version:major
npm run version:minor
npm run version:patch
Each version bump command automatically updates:
package.json - Package versionmanifest.json - Plugin manifest versionversions.json - Version history with minimum Obsidian version.github/workflows/release-zip.ymlworkflow_dispatch${id}-${version}.zip containing manifest.json, main.js, versions.json, and styles.css when present