Creating a visualization tool for mermaid.js is a good way to test the visualizations result before integrate them in a webpage.
A live version of the app is available here.
The HTML structure leverages Bootstrap for responsive layout and integrates mermaid.js to render diagrams dynamically. Here’s a simplified version of the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="app-version" content="2.0.3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MA Visualization</title>
<!-- Bootstrap CSS -->
<link href="/assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="visualization.css">
</head>
<body id="page-top">
<!-- Main Section -->
<section class="py-5">
<div class="container">
<h2 class="text-center mb-4">Mermaid.js Renderer</h2>
<p> Enter your diagram code in the box below. The rendered diagram will appear in the preview area. Ensure your syntax follows the <a href="https://mermaid.js.org/" target="_blank">mermaid.js documentation</a>.</p>
<div class="row">
<div class="col-md-6 mb-3">
<textarea id="code" class="form-control" rows="10" placeholder="Enter mermaid code here..."></textarea>
</div>
<div class="col-md-6 mb-3">
<div id="preview" class="border p-3" style="min-height: 200px;">Your diagram will appear here...</div>
</div>
</div>
</div>
</section>
<!-- Bootstrap JS and Dependencies -->
<script src="/assets/js/lib/jquery-3.7.1.slim.min.js"></script>
<script src="/assets/js/lib/popper-2.11.8.min.js"></script>
<script src="/assets/js/lib/bootstrap-5.3.2.min.js"></script>
<!-- Mermaid.js -->
<script src="/assets/js/lib/mermaid-11.4.1.min.js"></script>
<script src="/assets/js/mermaid-options.min.js"></script>
<!-- Custom JS -->
<script src="visualization.js"></script>
</body>
</html>
col-md-6), allows users to input their Mermaid.js code.This HTML structure provides a clean and responsive layout for the visualization app. Bootstrap ensures that the app looks good on all screen sizes, while Mermaid.js handles the dynamic rendering of diagrams. In the next sections, we’ll delve into styling with CSS and adding interactivity with JavaScript to make the app fully functional.
After setting up the HTML structure using Bootstrap and integrating mermaid.js, the next step is to style the application to ensure it is both visually appealing and user-friendly.
We’ll use custom CSS to enhance the layout and appearance of our visualization app.
/* Container for the playground (textarea and preview) */
.playground-container {
height: 100vh; /* Full viewport height */
display: flex; /* Use Flexbox for layout */
flex-direction: column; /* Stack vertically by default */
}
/* Adjust layout for screens 768px and wider */
@media (min-width: 768px) {
.playground-container {
flex-direction: row; /* Arrange side by side */
}
}
/* Styling for the Mermaid.js code textarea */
#code {
resize: none; /* Disable manual resizing */
padding: 0.1rem 1rem; /* Inner spacing */
outline: none; /* Remove default outline on focus */
margin: 1rem 3px; /* Outer spacing */
background-color: #2C2C2C; /* Dark background for contrast */
color: #F8F8F2; /* Light text color */
min-height: 300px; /* Minimum height for usability */
font-size: 0.85rem; /* Slightly smaller font size */
font-family: var(--bs-font-monospace); /* Monospace font for code */
}
/* Styling for the preview area where diagrams are rendered */
#preview {
overflow: auto; /* Enable scroll if content overflows */
border-left: 1px solid #ddd; /* Subtle left border for separation */
padding: 1rem; /* Inner spacing */
background-color: #f9f9f9; /* Light background for readability */
flex: 1; /* Allow preview to expand and fill space */
min-height: 300px; /* Match textarea height */
margin: 1rem 3px; /* Outer spacing */
}
We use a media Query (@media (min-width: 768px)) to changes the layout to horizontal (flex-direction: row;) for larger screens, allowing the textarea and preview to sit side by side.
The font used for the text is monospaced, which is ideal for code.
This JavaScript code enhances the visualization app by enabling real-time rendering of mermaid.js diagrams based on user input.
$(document).ready(function () {
$('#code').on('input', function () {
const $preview = $('#preview');
const code = $(this).val();
try {
$preview.html(`<div class="mermaid">${code}</div>`);
mermaid.init(undefined, $preview.find('.mermaid')[0]);
} catch (err) {
$preview.html('<p class="text-danger">Invalid Mermaid syntax</p>');
}
});
});
The code attaches an input event listener to the textarea with the ID #code. This listener triggers every time the user types or modifies the Mermaid.js code.
Upon input, the current value of the textarea is retrieved:
#preview) is updated with a new <div> containing the mermaid code;mermaid.init() is called to process and render the diagram within the preview area.This script ensures that users receive immediate visual feedback as they input their Mermaid.js code, enhancing the interactivity and usability of the visualization tool.
Building a visualization app with Mermaid.js and Bootstrap is an excellent way to integrate dynamic content rendering with responsive design.