[3.3][DEV] Mermaid Diagrams

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Ideas Centre
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

[3.3][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

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.

Image Image

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 (:warning: experimental :warning:)
  • 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:

Image Image Image Image

Image Image Image Image

(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
Last edited by AbaddonOrmuz on Thu Jan 23, 2020 7:31 pm, edited 7 times in total.
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
User avatar
3Di
Former Team Member
Posts: 15883
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by 3Di »

Looks good. Very useful.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
Looking for a specific feature or alternative option? We will rock you! 🚀
User avatar
david63
Registered User
Posts: 18104
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by david63 »

Looks interesting - although I was disappointed when there were no female sea creatures :lol: :lol:
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored
nou nou
Registered User
Posts: 403
Joined: Sat Oct 29, 2016 8:08 pm

Re: [3.2][DEV] Mermaid Diagrams

Post by nou nou »

Mermaids aren't uniquely female you know ;)
User avatar
3Di
Former Team Member
Posts: 15883
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by 3Di »

Any chance to provide a page with a live editor?
Using preview mode is quite tedious, you know :)
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
Looking for a specific feature or alternative option? We will rock you! 🚀
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

3Di wrote:
Sat Oct 26, 2019 10:28 pm
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 :|
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
1024KBUser
Registered User
Posts: 49
Joined: Mon Dec 23, 2013 1:18 pm

Re: [3.2][DEV] Mermaid Diagrams

Post by 1024KBUser »

nou nou wrote:
Sat Oct 26, 2019 5:29 pm
Mermaids aren't uniquely female you know ;)
https://www.youtube.com/watch?v=EoQW03UFqQw

It's mer Man *cough *cough*

Image
User avatar
3Di
Former Team Member
Posts: 15883
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by 3Di »

AbaddonOrmuz wrote:
Sun Oct 27, 2019 12:44 am
3Di wrote:
Sat Oct 26, 2019 10:28 pm
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.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
Looking for a specific feature or alternative option? We will rock you! 🚀
User avatar
donsenilo
Registered User
Posts: 306
Joined: Wed Oct 08, 2014 6:23 pm
Name: Markus
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by donsenilo »

Hi

Nice ext ! But it does not work with Advanced BBCode Box ...
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

donsenilo wrote:
Wed Nov 06, 2019 5:25 am
it does not work with Advanced BBCode Box
Yes it does.

Image

If you really meant "it does not show a BBCode button in the Advanced BBCode Box toolbar", that's another matter ;)
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

Extension updated to version 0.2.0-dev, see first post for download link and changelog.
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: [3.3][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

Extension updated to version 0.3.0-dev, see first post for download link and changelog.
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
User avatar
3Di
Former Team Member
Posts: 15883
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by 3Di »

AbaddonOrmuz wrote:
Sun Oct 27, 2019 12:44 am
3Di wrote:
Sat Oct 26, 2019 10:28 pm
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.
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
Looking for a specific feature or alternative option? We will rock you! 🚀
User avatar
AbaddonOrmuz
Recognised Extension Developer
Posts: 943
Joined: Wed Dec 25, 2013 9:06 pm
Location: /dev/null
Name: Alfredo
Contact:

Re: [3.2][DEV] Mermaid Diagrams

Post by AbaddonOrmuz »

3Di wrote:
Tue Jan 07, 2020 1:44 am
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 :D
Some of my phpBB extensions:
Image Imgur | :chart_with_upwards_trend: SEO Metadata | Image Markdown | :lock: Auto-lock Topics
:trophy: Check out all my validated extensions :trophy:

:penguin: Arch Linux user :penguin:
User avatar
3Di
Former Team Member
Posts: 15883
Joined: Mon Apr 04, 2005 11:09 pm
Location: Milan (IT) Frankfurt (DE)
Name: Marco
Contact:

Re: [3.3][DEV] Mermaid Diagrams

Post by 3Di »

Ah yeah, I like the idea. :)
Please PM me only to request paid works. Thx.
Want to compensate me for my interest? Donate
My development's activity º PhpStorm's proud user
Extensions, Scripts, MOD porting, Update/Upgrades
Looking for a specific feature or alternative option? We will rock you! 🚀
Post Reply

Return to “Extensions in Development”