Rational Team Concert Open Social Widget with Mermaid Markdown

Wouldn’t it be good to have Flowcharts, Sequencediagrams and Gantt inside your RTC Dashboard? Not as a image but as a Markdown? Then Mermaid could be a solution for you.

Product A-A1 Project Dashboard

As usual we will use the famous Open Social Widget (OSW) available for the Jazz Dashboard. When I say Jazz I mean RTC, DNG and also RQM.




Before we start let me give you some background information about Open Social Widgets:

  • Good explanation with working examples is found at the Warwick Blog.
  • Also the API is important.


Because we need one view to see the the graph and another to edit the Markdown I use the option to create two Tabs inside an Open Social Widget. I (misuse) the OSW Preferences to store the Markdown. Other OSW options like different Views or Dataexchange between Views doesn’t work and are known problems.

Code Snippet

<pre><?xml version="1.0" encoding="UTF-8" ?>
  <ModulePrefs title="RTC Graph/Sequence/Gantt Diagram" height="640" scrolling="true" >
    <Require feature="tabs" />
	<Require feature="setprefs" />
  <UserPref name="markdown"  display_name="Markdown" required="false" default_value="graph TD; A((Init New))-->|assign| B; B-->|postpone| BB((Postponed))" />
  <Content type="html">
    <link rel="stylesheet" type="text/css" href="css/mermaid.css">

    <script type="text/javascript" src="lib/mermaid.full.js"></script>
	<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>

    <script type="text/javascript">

    var tabs  = new gadgets.TabSet(__MODULE_ID__, "Graph");
	var prefs = new gadgets.Prefs();

	function init() {
	console.log('Inside Init');
	    document.getElementById("markdownTextarea").value = prefs.getString("markdown");
        tabs.addTab("Graph", {
           contentContainer: document.getElementById("graphId"),
		   callback: callback
		tabs.addTab("Markdown", {
           contentContainer: document.getElementById("markdownId"),

		tabs.alignTabs('left', 10);

    // Callback that provides content to tabs Three and Four
    function callback(tabId) {
		var div = document.createElement("div");
		var markdownText = '';

		div.className  = 'mermaid';
		if (document.getElementById("markdownTextarea").value == '') {
			markdownText = 'graph TD; A((Init New))-->|assign| B; B-->|postpone| BB((Postponed));';
		} else {
			markdownText = document.getElementById("markdownTextarea").value;
	    prefs.set("markdown", markdownText);

	    div.innerHTML = markdownText;
		document.getElementById(tabId).appendChild(div), window.mermaid.init();

    // Call init function to initialize and display tabs.

    <div id="graphId"  style="display:none"></div>
	<div id="markdownId" style="display:none">
		<textarea  id="markdownTextarea" class="js-mermaid-content form-control" style="min-height: 300px; width: 100%; resize: vertical"></textarea>

Complete Code

  1. #1 by baselinesinc on 07/01/2016 - 17:29

    When I pull down mermaid.zip and add your code (without the pre tag) in gadget.xml and point the Open Social Widget at it, it flat out doesn’t load on the dashboard. Just an empty widget. The ‘Inside Init’ text does appear in the console. Got any ideas? I’d LOVE to implement this!

    • #2 by rtcpractise on 11/01/2016 - 10:16

      Hi Kevin,

      could you use Chrome Developer Tools and open the console? In case of problems you will what went wrong.
      I hope this helps.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: