Rendering issue with mermaid gantt diagram in Rmarkdown

Question

I'm trying to insert a Gantt diagram in my Rmarkdown, using DiagrammeR mermaid. The problem is when I knit to html, my text appears all greyish/transparent. I noticed that when I remove the ## for headers, everything's fine. Does anyone have a solution for me?

Here's the code template :

---
title: "My title"
author: "J. Doe"
output:
  html_document:
    toc: no
bibliography: biblio.bib
--- 

```{r libraries, include=FALSE}
library(DiagrammeR)```


```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)```

<style>
body {
text-align: justify}
</style>

## Table of content
1. [Project objectives](#bullet-1)  
2. [Done and current tasks](#bullet-2)  
3. [Bibliography](#bullet-3)  

## 1. <a class="anchor" id="bullet-1"></a> Project objectives

PROJECT DESCRIPTION

## 2. <a class="anchor" id="bullet-2"></a> Done and *current* tasks

TASKS


```{r, echo=FALSE}
gantt=DiagrammeR::mermaid("
gantt
dateFormat  YYYY-MM-DD
title A Very Nice Gantt Diagram

section Basic Tasks
This is completed             :done,          first_1,    2014-01-06, 2014-01-08
This is active                :active,        first_2,    2014-01-09, 3d
Do this later                 :               first_3,    after first_2, 5d
Do this after that            :               first_4,    after first_3, 5d

section Important Things
Completed, critical task      :crit, done,    import_1,   2014-01-06,24h
Also done, also critical      :crit, done,    import_2,   after import_1, 2d
Doing this important task now :crit, active,  import_3,   after import_2, 3d
Next critical task            :crit,          import_4,   after import_3, 5d

section The Extras
First extras                  :active,        extras_1,   after import_4,  3d
Second helping                :               extras_2,   after extras_1, 20h
More of the extras            :               extras_3,   after extras_1, 48h
")
gantt```

## 3. BIBLIOGRAPHY

Many thanks!

J.