How to make GitHub Pages Markdown support mermaid diagram? - javascript

I am hoping to use mermaid in GitHub-pages, with simple commit and push.
In other words, I am hoping to wirte in my markdown file like this
```mermaid
graph LR
A --> B
A -->C
C -->D
```
and add some js on my _layouts/post.html to somehow transform this to a mermaid graph.
I have found this theme claims that it supports such thing. But this theme looks way too heavy for me, the js were just too much, so I thought I could only use this file, which is simply
<script>
window.Lazyload.js('{{ _sources.mermaid }}', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
In my _include/mermaid.html, I replaced {{ _sources.mermaid }} to the mermaid cdn
<script>
window.Lazyload.js('https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js', function() {
mermaid.initialize({
startOnLoad: true
});
mermaid.init(undefined, '.language-mermaid');
});
</script>
it still won't work. In my post, it was shown as regular code blocks, not a mermaid diagram.
Edit: In chrome developer's view, I don't see any connections made to the link https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js.
And I tried this code, a connection to mermaid wes made in network tag in developer view, but the mermaid diagram still doesn't work
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
<script>
var config = {
startOnReady:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
mermaid.init(undefined, '.language-mermaid');
</script>

I found the solution.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js"></script>
</head>
<body>
<pre><code class="language-mermaid">graph LR
A-->B
</code></pre>
<div class="mermaid">graph LR
A-->B
</div>
</body>
<script>
var config = {
startOnLoad:true,
theme: 'forest',
flowchart:{
useMaxWidth:false,
htmlLabels:true
}
};
mermaid.initialize(config);
window.mermaid.init(undefined, document.querySelectorAll('.language-mermaid'));
</script>
</html>

If you're using Jekyll, and you don't mind to use a plugin, I think the below can help you do it easier.
jekyll-spaceship - 🚀 A Jekyll plugin to provide powerful supports for table, mathjax, plantuml, mermaid, youtube, emoji, vimeo, dailymotion, etc.
https://github.com/jeffreytse/jekyll-spaceship
There are two ways to create a diagram in your Jekyll blog page:
```mermaid!
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
```
or
#startmermaid
pie title Pets adopted by volunteers
"Dogs" : 386
"Cats" : 85
"Rats" : 35
#endmermaid
Code above would be parsed as:

Feb. 2022: Markdown pages support Mermaid (gist too) (aug. 2022: wiki pages too).
As Jegors ÄŚemisovs adds in the comments, this does not apply yet to GitHub pages, as illustrated by his example site.
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:

I solved it buy installing Github Mermaid extensioin in the browser.
Actually, they have support for Chrome, Opera & Firefox.
I am using Chrome: https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe?hl=en

In addition to the other answer that mention the plugins. In a firm I work form asked to provide extention links to most supported browsers.
Here are the Mermaid extention that renders Mermaid on browser level, I have tested them all:
Mermaid diagram for documentation
When you use mermaid to create diagrams in Gitlab, and in case the business moves with new Version Control provider like Github or Azure DevOps or others, in this case you need to install a browser plugins to make it possible to view the diagrams.
Chrome -> GitHub + Mermaid
Firefox -> GitHub + Mermaid
Opera -> Extensions for Mermaid
Edge -> Extensions for Mermaid

I assume this requirement is with Jekyll + Github Pages since Github Pages is mentioned.
There's plugins doing this, such as jekyll-spaceship.
It supports a lot more rendering format.
In order to make the unsafe plugins works on Github Pages, you will need a Github Workflow Action jekyll-deploy-action.
BTW: The custom plugins (putting plugins in your _plugins folder) won't work with Github Pages, they are not the safe plugins. Github Pages locks the config to safe=true, even locally.

The URL you tried to use does not exist. This is a correct URL:
https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

I was having a similar problem and ended up just going with a custom jekyll plugin. If you are able to use custom plugins, the following will replace the markdown code blocks for mermaid with elements.
Jekyll::Hooks.register :posts, :pre_render do |post, payload|
docExt = post.extname.tr('.', '')
# only process if we deal with a markdown file
if payload['site']['markdown_ext'].include? docExt
newContent = post.content.gsub(/```mermaid([^`]+?)```/, '<div class="mermaid">\1</div>')
post.content = newContent
end
end

The new best answer is that GitHub now directly supports including diagrams in your markdown files with Mermaid!
https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/

Related

How to enable an UI Plugin on CloudStack?

I'm trying to learn to develop plugins for CloudStack and I'm having big problems on viewing that plugin on the CloudStack UI. I cloned the repository from GitHub and checkout to 4.9.2.0.
To deploy it, I used this:
mvn -pl :cloud-client-ui jetty:run -Dorg.eclipse.jetty.annotations.maxWait=120
The CloudStack UI (client) went up and everything is working fine. I modified all the plugins.js that I found at the source code to uncomment this line:
cloudStack.plugins = [
//'testPlugin',
When I go the URL of my client, I can't see the testPlugin. If I go to http://10.0.1.9:8080/client/plugins/plugins.js I will still see the testPlugin line commented...
I have restarted the server many times.
To do this, I have followed this guide. Specially, this part: "How to Write a Plugin: Implementation Details"
Any suggestions? Thanks!
I just fixed it!
Found that there is this file: plugins.js.gz... This file is exactly located on client/target/generated-webapp/scripts/plugins.js.gz. I renamed it and the jetty started reading the plugins.js.
Thanks everyone!

joint.setTheme is not a function in JointJS-Rappid

I am trying to set theme for my application.I included the dependent files in the order jquery,lodash,backbone,graphlib,dagre,keyboard,rappid and localJs file. when i tried to set the theme with joint.setTheme(dark); it throws an error in the console Joint.setTheme is not a function. I went through the rappid documentation Rappid documentation UI
I included rappid.js and rappid.css files instead of including individually other joint.ui.xxx.js files in-order to get access to all the features that rappid provides.
the sample JS code looks like this joint.setTheme error code.
How can i set the theme specific to the code written in the fiddle below? please help...
you don't need to include rappid for themes, as the setThemes is part of the JointJS core. Also make sure joint is exposed to global namespace when you tried the joint.setTheme in browser console.
For inspiration please visit setTheme fiddle https://jsfiddle.net/vtalas/2kubzakn/
Actually i need Rappid for application styling. What i found is joint.setTheme is available in rappid V2.0 i was using older version(found with joint.version in the console). When i update rappid.min.css and rappid.min.js to V2.0 it is working. #vt your example is impressive. Thanks for that and appreciate your time.

Visual composer doesn't load and gives TypeError: _.template(...).trim is not a function

My visual composer plugin doesn't work. It stuck on the loading page. And it gives an error "TypeError: .template(...).trim is not a function"
Error is on this line of code:
this.$controls = $(.template(template, data, vc.template_options).trim()).addClass('vc_controls');
Please help me to fix this out.
Here is the error which I get:
If you are unable to solve this error by upgrading or downgrading your theme or plugin, you could at least make the below changes.
1. Open the following two files:
wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
2. Replace
this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );
with
this.$controls = $( ( "vc.template_options" ).trim() ).addClass( 'vc_controls' );
This will surely work.
Solution Goto file /wp-content/plugins/js_composer_salient/assets/js/dist/backend.min.js around line 4045:
======> Replace the code
html2element: function(html) {
var $template, attributes = {},
template = html;
$template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) {
attributes[attr.name] = attr.value
}), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent()
},
Upgrade to Visual Composer version 4.11.2+
Note Wordpress 4.5 compatibility was fixed on 13th April:
https://wpbakery.atlassian.net/wiki/display/VC/Release+Notes
You should try to fix this by up/downgrading your theme/plugin. But if you, like me, can't solve it this way and just need to do a quick hack to get past this particular problem, the following worked for me.
Edit the following two files:
wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
Change a single line in each of them, adding (). Change:
this.$controls = $( _.template( template, data, vc.template_options ).trim() ).addClass( 'vc_controls' );
to:
this.$controls = $( _.template( template, data, vc.template_options )().trim() ).addClass( 'vc_controls' );
As Shady sherif said at Maulik's suggestion, this is what I've changed in 2 places at frontend-editor.min.js and it worked!! Thanks to you both!
Change this:
this.$controls=$(_.template(template,data,_.extend({},vc.template_options,{ evaluate:/\{#([\s\S]+?)#}/g})).trim()).addClass("vc_controls");
With this:
this.$controls=$(("vc.template_options").trim()).addClass("vc_controls");
UPDATE:
in current updates none of this is needed just replace the plugin
I had problem with WPBakery Page Builder in version 6.0.2.
Wordpress: Version 5.2.1
ERROR: Uncaught TypeError: window.vc.frame_window.jQuery is not a function at window.vc.ShortcodesBuilder.buildFromContent (frontend-editor.min.js? Ver = 6.0.2: 10)
     at Object.vc.build (frontend-editor.min.js? ver = 6.0.2: 10)
     at frontend-editor.min.js? ver = 6.0.2: 10
I was reluctant to upgrade, as there might be a bug. (But it is a fact that an update is bug fix)
Since the update to version 6.0.3 was not successful.
Solution:
Mine was restoring the backup of the whole site.
Tip: Never forget Backup.
This article suggests rolling back your worpress version prior to 4.5. http://forums.artbees.net/t/urgent-wordpress-4-5-broken-vc-backend-editor-workaround-fix-in-comments/2734
This is where you can find older versions of wp to install https://wordpress.org/download/release-archive/30
I haven't tried this myself just a suggestion.
If this is still a problem for you I solved this same error I was getting by manually updating my theme through ftp. I downloaded the latest version of the theme because automatic updates were not working. I kept wordpress version 4.5. Here are the steps I took as follows.
I renamed the theme example x-updating once uploaded named the current theme x-previous then changed x-updating to x and deleted x-previous.
I updated js_composer the same way as step 1. Uploaded latest version of js_composer which was bundled with the theme. This is updated in plugins outside the theme. At this point you should be able to update visual composer from the wp dashboard if it hasn't already.
This got vc working again but left me with some weird errors happening in vc_templates vc_column.php file. I had to manually comment out the trouble code to get the errors to go away.
These 3 steps are a little nerve racking if you are not familiar with uploading files directly to your public_html root directory of your website. Some themes may offer support and do the ftp uploading for you if you provide them with ftp username password.
One more thing to do is clear your cache for your website. In chrome you can clear your cache by going to chrome://settings/cookies enter website.com in the search bar and click remove all clearing all locally stored data for your website. Manual updating themes and plugins is recommended only if auto updates aren't possible then you do the above. For my theme and this same exact error in question I followed these really well-done steps https://community.theme.co/kb/updating-your-theme-and-plugins/. However this will be different depending which theme you have. And if you would rather roll back your wp version you can follow my original suggestion. But for me I like to have everything new and up-to-date.
One more important note if you do have this theme then I had to delete x-shortcodes plugin from plugins direcotry of my website because my updated theme uses cornerstone instead of x-shortcodes to process important shortcodes to make vc work properly. Another thing to know is none of your data should be harmed while uploading plugins and themes all the data/content is stored safely in your data-base not in your theme.
I tried the following solutions:
maulik`s (but there was no such files on my plugin folder - frontend_editor.js and custom_views.js, just a "vendors" folder on "/wp-content/plugins/js_composer/assets/js/frontend_editor"),
Amritosh pandey`s solution (does not work even after cache & history cleaning),
Berein`s solution (does not work too).
I solved the problem by using a Amritoshpandey's solution:
https://gist.github.com/levantoan/519bb0d42c9f7bd6c4d78ef1686bb848
("The following code has completely corrected my problems, I can load the page, add, clone, remove, etc")
The Amritoshpandey's code should be pasted in /wp-content/plugins/js_composer/assets/js/dist/backend.min.js instead of:
render:function(){var $shortcode_template_el=$("#vc_shortcode-template-"+this.model.get("shortcode"));if($shortcode_template_el.is("script"))this.html2element(_.template($shortcode_template_el.html(),this.model.toJSON(),vc.templateOptions["default"]));else{var params=this.model.get("params");$.ajax({type:"POST",url:window.ajaxurl,data:{action:"wpb_get_element_backend_html",data_element:this.model.get("shortcode"),data_width:_.isUndefined(params.width)?"1/1":params.width,_vcnonce:window.vcAdminNonce},dataType:"html",context:this}).done(function(html){this.html2element(html)})}return this.model.view=this,this.$controls_buttons=this.$el.find(".vc_controls > :first"),this},
If you have Visual Composer 4.9, just replace these 2 files from archive
- frontend-editor.min.js
- backend.min.js
path: /wp-content/plugins/js_composer/assets/js/dist
Don't forget to make a backup of your files.
https://yadi.sk/d/JH4cbtnH3UoU3F
click "download add"
(tested with VC 4.9 & WP 4.9.5)
I used version 4.10 and upload the file assets/js/frontend-editor.min.js to the same file in 4.12 version.
Note: I keep my version and update only this file. I things this issues risen after update my php version, but i dont sure about that.
That`s work fine.
I get this file here: https://www.downloadfreethemes.io/visual-composer-v5-0-1-page-builder-for-wordpress/
I have theme license.
Replacing file
> wp-content\plugins\js_composer\assets\js\frontend_editor\frontend_editor.js
> wp-content\plugins\js_composer\assets\js\frontend_editor\custom_views.js
is not a solution, you can download cracked version and resolve it:
https://www86.zippyshare.com/v/fguQVId6/file.html
1.Please Deactivate the plugin
2.Delete all the files from plugin folder (js_composer folder)
3.Download the Latest Version of Visual Composer
4.Add new Plugin --> and select the downloaded plugin -->Upload --->Activate

Finding the version of dojo through IBM BPM 8

I am working on creating a process flow using IBM BPM 8 on a dojo platform which encompasses the use of javascript. We have in use three versions that supports NextGen coaches; Heritage coaches and Portal versions. Now through this, we are trying to implement a calendar view like that of FullCalendar or one like that of SharePoint. The group that I am working with is uncertain of how to incorporate the code function dojo.version.toString() in order to yield the results we want. I do have examples of what I have tried but am unsure of exact syntax due to using different tools.
Below are a few examples of what I have tried. Such a call is a little more out of my knowledge of what to do or the syntax to use, so laugh if you want, wont take offense, but I do hope to get some help or at least guided where I can get some help.
<script type=”text/javascript”>
getVersion(){
alert(“Version: “ + dojo.version.toString());
}
</script>
<input type=”button” onclick=”getVersion()”>Get Version</input>
RESULT: nothing
var foo: String=dojo.version.toString();
RESULT: nothing
var string=dojo.version.toString();
RESULT: nothing
var string=dojo.version.toString();
<button type="button">Get Version</button>;
RESULT: nothing
I am not the most savvy of programmers and have been directed by the group to just look up if there have been successes in this realm but have found a few that looked promising but when I try it out myself, everything works except for the version not appearing.
Thank you for your time and consideration. Any and all information is greatly appreciated.
I'm not exactly sure of your setup, but if you browse to:
http://dojotoolkit.org/
And then either in Firebug's console for Firefox, or Chrome developer tools' console, type this:
dojo.version.toString()
Then press enter, you will get (something like) this:
"1.8.3 (30226)"
To get this working in your code, you would use the following assignment:
var dojoVersion = dojo.version.toString();
Or in the style of your example
<script>
function getDojoVersion() {
alert("Version: " + dojo.version.toString());
}
</script>
<button onclick="getDojoVersion()">Get Version</button>
Off topic: I think some of your double quotes have pasted incorrectly, and I don't think they are valid JavaScript as they are.
Off topic: The <input> tag is not supposed to have any content.
dojo 1.7.3 is used in IBM BPM 8, if i remember correctly.
IBM BPM 8, 8.0.1 and 8.0.1.1 all use the dojo version 1.7.3. IBM BPM 8.0.1.2 now uses 1.7.4. However, these dojo builds are IBM customized. They are not necessarily the ones released officially by dojo. Many of their features are specific for IBM BPM.
I know it's been a while since you posted this question
If you still in need or maybe someone else who has the same issue
you can use Firebug onload it will give you which version is used
dojo version used by Coach is: 1.8.6

Using Remy Sharp twiterlib

So I have come across this excellent twitter library from Remy Sharp. Hoever I am not able to find an real instructions on how to implememt it, I have included the .js file and wish to use it in the following way to produce the 5 most recent updates from a user account.
But I cannot see how I actually output it to html correctly.
twitterlib.timeline("xclusivfitness", { page: 1, limit: 5 }, callback);
I presume i need to create a function to produce the html, but have hit a wall.
Sorry!
He's documented this library at https://github.com/remy/twitterlib. That should give you a good start.

Categories