Skip to content
master
Go to file
Code

Latest commit

* Toggle arrow color on click

When there are a lot of arrows and nodes, it's very hard to follow a single arrow. The stroke-size change on hover helps, but it has two weaknesses:
  1. the arrow still blends with others which are right next to it.
  2. when the diagram is big and the arrow is very large, scrolling will always turn off the hover state.

The color change makes the arrow stand out and it persists through scrolling.
8f8fb9e

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

JBZoo / Mermaid-PHP

Build Status Coverage Status Psalm Coverage
Stable Version Latest Unstable Version Dependents GitHub Issues Total Downloads GitHub License

Generate diagrams and flowcharts as HTML which is based on mermaid-js.

Usage

<?php

use JBZoo\MermaidPHP\Graph;
use JBZoo\MermaidPHP\Link;
use JBZoo\MermaidPHP\Node;
use JBZoo\MermaidPHP\Render;

$graph = (new Graph(['abc_order' => true]))
    ->addSubGraph($subGraph1 = new Graph(['title' => 'Main workflow']))
    ->addSubGraph($subGraph2 = new Graph(['title' => 'Problematic workflow']))
    ->addStyle('linkStyle default interpolate basis');

$subGraph1
    ->addNode($nodeE = new Node('E', 'Result two', Node::SQUARE))
    ->addNode($nodeB = new Node('B', 'Round edge', Node::ROUND))
    ->addNode($nodeA = new Node('A', 'Hard edge', Node::SQUARE))
    ->addNode($nodeC = new Node('C', 'Decision', Node::CIRCLE))
    ->addNode($nodeD = new Node('D', 'Result one', Node::SQUARE))
    ->addLink(new Link($nodeE, $nodeD))
    ->addLink(new Link($nodeB, $nodeC))
    ->addLink(new Link($nodeC, $nodeD, 'A double quote:"'))
    ->addLink(new Link($nodeC, $nodeE, 'A dec char:♥'))
    ->addLink(new Link($nodeA, $nodeB, ' Link text<br>/\\!@#$%^&*()_+><\' " '));

$subGraph2
    ->addNode($alone = new Node('alone', 'Alone'))
    ->addLink(new Link($alone, $nodeC));

echo $graph; // Get result as string (or $graph->__toString(), or (string)$graph)
$htmlCode = $graph->renderHtml([
    'debug'     => true,
    'version'   => '8.6.0',
    'theme'     => Render::THEME_DARK,
    'title'     => 'Example',
    'show-zoom' => true
]); // Get result as HTML code for debugging

echo $graph->getLiveEditorUrl(); // Get link to live editor 

Result

Open live editor

graph TB;
    subgraph "Main workflow"
        E["Result two"];
        B("Round edge");
        A["Hard edge"];
        C(("Decision"));
        D["Result one"];
        E-->D;
        B-->C;
        C-->|"A double quote:#quot;"|D;
        C-->|"A dec char:#hearts;"|E;
        A-->|"Link text<br>/\!@#$%^#amp;*()_+><' #quot;"|B;
    end
    subgraph "Problematic workflow"
        alone("Alone");
        alone-->C;
    end
linkStyle default interpolate basis;

See also

Unit tests and check code style

make update
make test-all

License

MIT

You can’t perform that action at this time.