I'm new to Azure Devops but have found items online that suggest it is possible to create Entity Relationship Diagrams in an Azure wiki page using mermaid. For example in the link below.
https://github.com/mermaid-js/mermaid/issues/1338
I can create items with mermaid code however when I use the erDiagram text and click to load diagram, I just get an "Unsupported diagram type" error. I'm not sure if this is something wrong in my text or if I need to upgrade mermaid(?). I have no clue about all this really as I'm new to it and a quick google seems to imply this is a common problem that hasn't been solved yet.
Can somebody please help?
It seems erDiagram is not presently supported by Azure DevOps Wiki's mermaid implementation. I get the same error with an erDiagram that renders fine in the Mermaid Live Editor. I've had trouble with other diagram types too.
This page, Markdown Syntax...Mermaid diagrams, indicates only three diagram types are presently supported:
Sequence diagrams
Gantt Charts
Flowcharts
Related
I've followed this MermaId tutorial but when I try put into my .md file on Github an error is raised:
This works perfectely on Live editor.
Code:
```mermaid
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```
Someone can help me find my error on try write it on Github
Currently, I struggle on a similar problem.
With GitHub, do you mean GitHub pages?
Could you find a solution to it?
Personally, I have a setup with Jekyll. Here is my question on how to setup mermaid correctly for jekyll.
Interestingly, I just posted your mermaid into my jekyll page and the result is:
If I put it into <div> tags with class mermaid. Setup I used was this.
And if I use the jekyll spaceship-plugin, ist renders to:
I guess, that this what it should like. Am I right?
Therefore, so far, for me mermaid works based on the spaceship plugin, but not by "natively" referencing the mermaid JavaScript. I do not know if spaceship will work with GitHub pages, however, definitely within GitHub pages (which is based on Jekyll), you may also add plugins. See documentation for further details.
When defining a link like this
[description](ftp://user:pw#host/...)
or simply
ftp://user:pw#host/...
Azure DevOps turns the colon between user and pw into a slash. In other words, the effective user name when clicking the link will be user/pw, with no password set.
Is there a way to prevent AzDO from doing that?
As a workaround, I'm now using backticks:
`ftp://user:pw#host/...`
which keeps the url unchanged, but a) it is not turned into a clickable link and b) I cannot use a description text to be displayed in place of the link.
Update: What I'm trying to do is fine according to CommonMark, an attempt to create an unambiguous specification of Markdown, that has been adopted by the likes of GitHub and StackOverflow:
Update>>By reference to this doc: About Wikis, READMEs, and Markdown, wiki uses Markdown format.
Testing in Markdown online and found that this
[description](ftp://user:pw#host/...) will show link content ftp://user:pw#host/.... However, it shows ftp://user/pw#host/... in Azure DevOps wiki page, so this issue can be reproduced.
It might be caused by Azure DevOps security consideration, I suggest that you could submit this issue here, so the product group will investigate it further. Thanks for your feedback.
I'm trying to render a flowchart in a markdown file using Mermaid. I have a ReadMe.md file in my GitHub repository, and I'd like to include a basic flowchart to help describe the contents. But I can't figure out how to get it to work. Would someone be able to post some more specific instructions on how to render a simple example?
In this link (https://unpkg.com/mermaid#8.0.0-rc.8/README.md), there's an example code snippet for the Mermaid installation:
```
https://unpkg.com/mermaid#7.1.0/dist/
```
I included that code, then tried to make the flowchart in the next code snippet:
```
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
But all it does is print that text out in the markdown file when I preview it.
It seems like it's possible based on the Mermaid ReadMe: https://github.com/knsv/mermaid/blob/master/README.md. But when I looked at the code it's actually a picture of the flowchart, not a rendering of code. So maybe what I'm asking isn't possible?
Would appreciate any help!
I created a Firefox & Chrome extension that wasn't available at the time of the first answer: Github + Mermaid
To use it you will need to specify mermaid as a language:
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
This works on:
PR and issues
Comments
Gists
(both on preview and save)
PS: I'm not sure whether it's right or not to advertise my own work here, but I feel it answers the questions.
Unfortunately, github-flavoured markdown doesn't support rendering of mermaid graphs. See this issue for more information and finding comfort in other peoples quest of this feature ;)
If your are using VS Code, you can use this extension to preview your mermaid code blocks inside markdown but note that this does not render once you put it on github. To include the chart on github you will have to render it to a file, though someone suggested somehow using the online mermaid editor to render it and retrieve an URL to a rendered version.
Actually, let me try to insert the example chart from the link on the previousely mentioned page... and, no. We get a Failed to upload image; the format is not supported-error.
So you will need to save it as an image first.
You can use mermaid-cli https://github.com/mermaidjs/mermaid.cli for generating diagrams. you can produce .svg, .png or .pdf file whatever you want.
Run following command after installing mermaid-cli
mmdc -i input.mmd -o output.png
here input.mmd is your mermaid file which contains
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
in your case.
Another solution in moving your repository to gitlab.
It natively supports mermaid in all markdown files.
Gitlab Markdown Tutorial
Feb. 2022, Markdown pages now officially support Mermaid:
(Note: Aug. 2022, GitHub wiki pages too)
See:
Include diagrams in your Markdown files with Mermaid
Mermaid is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. Maintained by Knut Sveidqvist, it supports a bunch of different common diagram types for software projects, including flowcharts, UML, Git graphs, user journey diagrams, and even the dreaded Gantt chart.
Working with Knut and also the wider community at CommonMark, we’ve rolled out a change that will allow you to create graphs inline using Mermaid syntax:
Gist supports mermaid too.
Jan 2022, while GitHub Markdown does not yet support Mermaid, this is on the roadmap:
"Mermaid diagrams can be displayed within Markdown #372"
Just as language-specific code blocks can be added to Markdown, you'll be able to add a Mermaid diagram using a code block that specifies mermaid as its language identifier. For example:
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
The Markdown code block above uses Mermaid syntax to display this flowchart in the rendered Markdown:
And:
Another example from the Mermaid website shows how straightforward text can be used to create rich diagrams:
sequenceDiagram
autonumber
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
I'm looking for a report engine which may:
connect to data source via JDBC
create logic data set by grouping/aggregating the raw data
include a data filter on the top of each report, which allows my client use the report interactively
add custom charts, in my case, it's ECharts https://github.com/ecomfe/echarts
support multi-tenancy paradigm (new requirement)
Now BIRT and Pentaho are the two players on my table.
For pentaho, it's really hard to find useful document to at least clarify if it's capable. Please if you're familiar with it, let me know if pentaho community version meets my requirements.
For BIRT, I've found evidence it support my first 3 needs. But for custom charts, I can only find examples/docs about adding custom IMAGE/SVG charts. As ECharts is based on canvas, I'm not sure if it's possible to integrate ECharts with BIRT.
Thank you!
Yes, it is possible to integrate javascript charts in BIRT. Basically:
Select the top-level element of your report outline -> Script tab -> clientScripts
Include here your echart resources (.js and .css) using "head.js" (see link below for more informations)
Add a text element to the report
Set the type of this new element to 'HTML'
In a script tag, initialize your echart object in a "head.ready()" instruction (see link below for more informations). The tricky part is to understand how to use a server-side dataset in a client-side chart within this html script.
You can find more informations and a full example of a such report here, this example embeds a jvectormap in a birt report. Furthermore, see a live demo here, where a JIT chart is integrated in a BIRT report.
However since these charts are created using a client-side framework, obviously BIRT won't be able to export them in PDF format. You can see in the live demo linked above, how a BIRT report can easily handle a different output when users export to PDF.
You can do it in Pentaho, but which tool to use it's a matter of debate.
Using Pentaho Report Designer:
- Connects to DBs using JDBC;
- Allows grouping rows based on a field or fields and calculating functions such as running sums;
- Can use selectors (single or multi-valued selectors) to interact with the report, passing the selector values to the queries;
- As far as I can tell, you don't have many options to choose a specific charting engine.
However, you can use CCC as the charting engine, which is a Protovis based Javascript charting engine, cross-browser compatible (for the most part), renders SVG charts with a decent fallback for IE (I believe the fallback is flash but I'm not sure if it changed recently) and produces decent looking charts.
If you HAVE to use that chart library, then I suggest using C-Tools dashboards instead, where you can embed as many different JS files you want and you have full control over the JS and CSS of the page. But most of the reporting functions from PRD will have to be implmented by you.
I'm looking to build an interactive web-based org chart for a large organization. I somewhat like the interface at ancestry.com where you can hover over people and pan/zoom around and click on different nodes to make them the root.
Ideally, I'd like it if people could belong to multiple organizational entities like committees, working groups, etc. In other words the API should support graphs in general, not just trees.
I'd like to be able to visually explode each organizational substructure into substituents by clicking on it, with a nice animation of the employees ballooning or spilling out so you can really interactively drill down through the organization.
I found http://code.google.com/apis/visualization/documentation/gallery/orgchart.html but it looks a bit rudimentary.
I know there are desktop tools like OrgPlus and Visio that can build static charts but I'm really looking for a free, web-based API with open standards-based output like SVG or HTML5 Canvas elements rather than Flash or some proprietary output. Something I can embed into a custom web application and style myself. Something interactive.
Check my solution on github: OrgChart.svg This is a modern full SVG orgchart with support of custom styling, tip-over / stacking possibility in the best known form. I would be very happy if it helps someone. It is based on snap.svg.
I ended up using the SpaceTree API from the Javascript InfoVis Toolkit to build my org chart:
http://philogb.github.com/jit/static/v20/Docs/files/Visualizations/Spacetree-js.html
I've had a go at building this in d3.js. It was originally built for data pulled from Yammer but now it will work with any csv - like this one.
Here's the repo and here's a demo. You will need to know a little html/javascript to customise it for your application.
There is this one for asp.net but I have only ever added it to my bookmarks so I can't vouch for how standards compliant it is:
http://www.orgchartcomponent.com/
Something you should also consider when you are looking in to this is your charting requirements. Many org charts only support a single top node. If you wanted to map a family tree for example then this might not be the case.