[3.3][DEV] Mermaid Diagrams

[AlfredoRamos]

Extension Name: Mermaid Diagrams
Author: Alfredo Ramos (Abaddon Ormruz)

Extension Description:

Generate diagrams and flowcharts from text in a similar manner as markdown.

It uses the mermaid library to transform text into SVG diagrams and charts.

Wrap the diagram or chart code in the [mermaid] BBCode.



Extension Version: 0.4.0-dev

Requirements:

• PHP 7.1.3 or greater
• phpBB 3.3 or greater

Features:

• Posting button for the [mermaid] BBCode
• Live editor ( experimental )
• Generate SVG diagrams from text
• Supports all diagrams and charts available in the library, currently:
  • Flowchart
  • Sequence diagram
  • Class diagram
  • State diagram
  • Gantt diagram
  • Git graph
  • Pie chart
• Compatible with Markdown extension
• It doesn't require extra configuration

Screenshots:





(Click to see in full size)

Extension Download: alfredoramos_mermaid_0.4.0-dev.zip
GitHub repository: AlfredoRamos/phpbb-ext-mermaid

Changelog:

• 0.4.0-dev - 2020-01-23
  • Add live editor, accessible by right-clicking the posting button
  • Wrap diagram in a <figure> tag instead of a <div>
  • Update to Mermaid library v8.4.6
• 0.3.0-dev - 2020-01-06
  • Update to Mermaid library v8.4.4
  • Update minimum phpBB version requirement to 3.3.0
• 0.2.0-dev - 2019-11-20
  • Update to Mermaid library v8.4.2, which fixes rendering issues with some diagrams
  • Assign keyboard shortcut to m
  • Add support (posting button) for ABBC3
  • Load library from CDN if that option has been enabled by the administrator
  • Small translation improvements
• 0.1.0-dev - 2019-10-25
  • First version

[3Di]

Looks good. Very useful.

[david63]

Looks interesting - although I was disappointed when there were no female sea creatures

[nou nou]

Mermaids aren't uniquely female you know

[3Di]

Any chance to provide a page with a live editor?
Using preview mode is quite tedious, you know

[AlfredoRamos]

Any chance to provide a page with a live editor?

Yeah, that's in my TODO list.

I'll need to look into it deeper, the live editor is a standalone React application, I'll try to extract what's needed to use it on phpBB.

Otherwise I'll try to do it on my own with the API

[1024KBUser]

Mermaids aren't uniquely female you know

https://www.youtube.com/watch?v=EoQW03UFqQw

It's mer Man *cough *cough*

[3Di]

Any chance to provide a page with a live editor?

Yeah, that's in my TODO list.

I'll need to look into it deeper, the live editor is a standalone React application, I'll try to extract what's needed to use it on phpBB.

Otherwise I'll try to do it on my own with the API

Yeah, I looked at it and searched for alternatives, to no avail.
It is indeed a tricky job, thanks for your interest.

[donsenilo]

Hi

Nice ext ! But it does not work with Advanced BBCode Box ...

[AlfredoRamos]

it does not work with Advanced BBCode Box

Yes it does.



If you really meant "it does not show a BBCode button in the Advanced BBCode Box toolbar", that's another matter

[AlfredoRamos]

Extension updated to version 0.2.0-dev, see first post for download link and changelog.

[AlfredoRamos]

Extension updated to version 0.3.0-dev, see first post for download link and changelog.

[3Di]

Any chance to provide a page with a live editor?

Yeah, that's in my TODO list.

I'll need to look into it deeper, the live editor is a standalone React application, I'll try to extract what's needed to use it on phpBB.

Otherwise I'll try to do it on my own with the API

I was also thinking about a "open in a new tab" link placed near or above the post editor, which opens in a pop-up maybe?
I mean to embed the original live editor if necessary.

[AlfredoRamos]

I was also thinking about a "open in a new tab" link placed near or above the post editor, which opens in a pop-up maybe?
I mean to embed the original live editor if necessary.

I've been testing with with a modal box, however it needs more testing. I just came back from holidays

[3Di]

Ah yeah, I like the idea.