![]() ![]() I could probably get smart and do some sed/awk on the main md file, but we can save that as an optimization for later. We need to move the memaid markdown to something i can process. Run `npm audit fix` to fix them, or `npm audit` for details + 87 packages from 45 contributors, updated 2 packages and audited 1548 packages in 21.412sįound 635 vulnerabilities (427 low, 18 moderate, 185 high, 5 critical) ![]() You must install peer dependencies yourself. Npm WARN requires a peer of but none is installed. ![]() > postinstall /Users/johnsi10/Workspaces/ghost-blog/node_modules/docxify-node > install /Users/johnsi10/Workspaces/ghost-blog/node_modules/puppeteerĭownloading Chromium r686378 - 110.2 Mb 100% 0.0sĬhromium downloaded to /Users/johnsi10/Workspaces/ghost-blog/node_modules/puppeteer/.local-chromium/mac-686378 $ npm install -save-dev docxify-node execa mermaid.cli showdown So now we have a wiki, perhaps there are some users who really want an image that can be put in private wiki, or a rendered PDF or Word Doc. You can remove a code-based wiki from "Unpublish". Note, I will eventually want to remove this as i'll point the wiki to the docs under "master" later (and i like my PRs to remove the source branch). Now we have a proper diagram automatically updated on pushes: lowercase mermaidġ file changed, 2 insertions(+), 2 deletions(-) +++ -2,7 +2,7 is a process flow out of blog pipeline "My_Process.md" would show up as "My Process"Īt first i got worried as the chart didnt render:īut then i realized i errantly used "Mermaid" instead of "mermaid" (casing matters) $ git diff docs/ĭiff -git a/docs/process.md b/docs/process.md Note: Azure DevOps will translate underscores as spaces in wiki file names (e.g. Usually I would only publish wiki from the constrained (master) branch, but for this demo, i'll use the feature branch: If you made a non-code wiki or already have other wikis from code, you can use the drop down to add another "Publish code as wiki": Let's do that now, go to Wiki and "Publish code as wiki" if you haven't already: I did indicate Azure DevOps can render these, but only via the Wiki area (for now). * feature/mermaid -> feature/mermaidīranch 'feature/mermaid' set up to track remote branch 'feature/mermaid' from 'origin'. Git push -set-upstream origin feature/mermaid To push the current branch and set the remote as upstream, use ![]() JOHNSI10-M1:ghost-blog johnsi10$ git pushįatal: The current branch feature/mermaid has no upstream branch. $ git commit -m "first draft on mermaid docs" We'll leave both in so you can see how Azure DevOps responds: $ git add docs Here is a process flow out of blog pipeline The Mermaid JS plugin in Visual Studio Code likes the 3 backticks way and Azure Repos uses 3 colons. Here is where we have a bit of a delta we need to manage. Let's create a markdown file and add the following diagram: graph TD graph TDĪ ->|New | B(Process Request)Ĭ ->|parse | D(Insert Request into Table)ĭ ->|something else | F(System B) Mermaid Editor Gantt:Īnd clearly they have examples for: Flow Charts, Sequence Diagrams, Class Diagrams, State Diagrams, Gantt Charts, Pie Charts and Entity Relationship (ER) Diagrams. Let’s just look at some examples (you can follow along in the live editor). The formatting was adopted by many tools including Azure DevOps. Mermaid is a an opensource javascript based diagram tool. I’ll work through how you can have diagrams as code, expose via Azure DevOps Wiki and even show how to compile images for distribution in a pipeline as well as autogenerate word docs you can use in other tooling (for instance, uploading into sharepoint or google drive). While i’ve been using Mermaid diagrams for some time, i realize not everyone knows what they are or how best to use them. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |