Comments (4)
I will get someone on it shortly, either myself or a colleague :)
It's been a busy month.
from mermaid-cli.
@CreativeCactus : would you consider working on PR? :)
from mermaid-cli.
This feature would be a game-changer for anyone who is looking to add diagrams to their readme.md file (running npx mmdc -i readme.template.md -o readme.md
).
from mermaid-cli.
Work around that I use:
tasks/generate-md.mjs
// @ts-check
import { promises as fs } from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { execFile } from "child_process";
import os from "os";
const dirName = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
const imageDir = path.join(dirName, "img");
const templatePostFix = ".template.md";
const files = await fs.readdir(dirName, { withFileTypes: true });
const mermaidRegexGlobal = /```mermaid\s*([\s\S]+?)\s*```/g;
const mermaidRegex = /```mermaid\s*([\s\S]+?)\s*```/;
await Promise.all(
files
.filter((entry) => entry.isFile())
.filter(({ name }) => name.endsWith(templatePostFix))
.map(async ({ name: fileName }) => {
const imgSubDir = fileName.slice(0, -templatePostFix.length);
const outDir = path.join(imageDir, imgSubDir);
await fs.mkdir(outDir, { recursive: true });
const content = await fs.readFile(fileName, "utf-8");
const diagrams = [];
const output = content.replaceAll(mermaidRegexGlobal, (mermaidMd) => {
const md = mermaidRegex.exec(mermaidMd)[1];
const imgUrl = `img/${imgSubDir}/diagram-${diagrams.length}.png`;
diagrams.push([imgUrl, md]);
return `![diagram](${imgUrl})`;
});
await Promise.all(
diagrams.map(async ([imgFile, md], index) => {
const tmpFileName = `__temp__${index}.mmdc`;
await fs.writeFile(tmpFileName, md, "utf-8");
await execMermaidCli(
"-i",
tmpFileName,
"-o",
path.resolve(dirName, imgFile)
);
await fs.rm(tmpFileName);
})
);
const outFile = `${fileName.slice(0, -templatePostFix.length)}.md`;
await fs.writeFile(path.resolve(dirName, outFile), output, 'utf-8');
console.log(`✅ ${outFile} (${diagrams.length} diagram${diagrams.length === 1? '': 's'})`);
})
);
async function execMermaidCli(...args) {
return new Promise((res, rej) => {
execFile(
os.platform() === "win32" ? "npx.cmd" : "npx",
["mmdc", ...args],
(err, stdout, stderr) => {
if (err) {
console.log(stdout);
console.error(stderr);
rej(err);
} else {
res();
}
}
);
});
}
I might be tempted to pick this one up, just because of how useful I think this feature is 😁
from mermaid-cli.
Related Issues (20)
- Custom image output for .md file input HOT 1
- SyntaxError: The requested module `@mermaid-js/mermaid-cli` does not provide an export named 'run' (via SyntaxError) HOT 1
- Formatting of diagram is changed when exported to svg, pdf or png
- Could not find Chromium (rev. 1108766) HOT 9
- Upgrade mermaid to 10.9.0 (Latex support) HOT 2
- Write output to stdout HOT 1
- Document mermaid-cli release procedure
- mmdc not generating labels for SVG outputs HOT 2
- improve performance of markdown file processing HOT 2
- Version bump happens after tagging HOT 3
- Trying to use browserUrl or browserWSEndpoint without success HOT 2
- $c4ShapeInRow not counting per row
- No diagram found in mardown file when using whitespace in definition.
- Exported png files are very low resolution HOT 1
- SVG is not displayed corectly in Gimp, Pinta, display or Image viewer HOT 3
- Markdown diagrams are not detected correctly
- Empty diagram generation. HOT 1
- gantt width always be 784, x-axis overlap
- Error: Failed to launch the browser process! HOT 2
- Weekday not updating in gantt chart HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mermaid-cli.