Structured Data Rendering - Complete Guide

Technical guide to implement tables, Mermaid diagrams, JSON and structured data visualization in your applications.

1. Initialize Mermaid.js

Include Mermaid.js and initialize it in the head of your page:

html
<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
<script>
  if (window.mermaid) {
    mermaid.initialize({ 
      startOnLoad: false,

2. Styled HTML Tables

CSS and HTML for responsive and professional tables:

html
<style>
.table-wrapper { overflow-x: auto; margin: 12px 0; }
.markdown-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.markdown-table th, .markdown-table td { border: 1px solid #e5e7eb; padding: 10px 14px; text-align: left; }
.markdown-table th { background: #f9fafb; font-weight: 600; }

3. Mermaid Diagrams

Examples of flowchart, sequence diagram and Gantt chart:

html
<!-- Flowchart -->
<div class="mermaid">
flowchart TD
    A[Start] --> B{Auth?}
    B -->|Yes| C[Dashboard]

4. JSON Viewer

Styling for readable JSON display:

html
<style>
.json-viewer {
  background: #1e293b;
  color: #e2e8f0;
  padding: 12px;

5. Markdown Cleanup for TTS

Important for developers: Before sending text to TTS (Text-to-Speech), remove all markdown formatting to avoid formatting symbols being read aloud.The function stripForTTS() cleans text from:

  • Code blocks (\`\`\`...\`\`\`) and inline code (\`codice\`)
  • Heading (# ## ###)
  • Bold (**testo**) and italic (*testo*)
  • Markdown links ([text](url)) - keeps only the text
  • Bullet and numbered lists
  • Quotes (&gt;) and separators (---)
  • HTML tags and entities (&amp;, &lt;, &gt;)
javascript
// Rimuove tutta la formattazione markdown per il TTS
function stripForTTS(raw) {
  const bt = String.fromCharCode(96); // backtick
  const codeBlockRegex = new RegExp(bt + bt + bt + '[\\s\\S]*?' + bt + bt + bt, 'g');
  const inlineCodeRegex = new RegExp(bt + '(.+?)' + bt, 'g');

⚠️ Why it's necessary: Without this cleanup, TTS would read "asterisk asterisk text asterisk asterisk" instead of "text", making the audio incomprehensible.

6. JavaScript Parser for Markdown Tables

Function to convert markdown tables to HTML:

javascript
// Converti tabelle markdown in HTML
function parseMarkdownTable(markdown) {
  const lines = markdown.trim().split('\n');
  if (lines.length < 3) return markdown;

7. Complete Integrated Example

Complete HTML page with all elements:

html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Structured Data Demo</title>

📚 Useful Resources