81 | * @param {HTMLPreElement} source Element containing the diagram source code, in Mermaid language.
82 | * @param {string} id A unique element id.
83 | * @returns {HTMLDivElement} The new
element.
84 | */
85 | function processElement(source, id) {
86 | const target = document.createElement('div')
87 | source.after(target) // Note: must happen before render
88 | try {
89 | let code;
90 | if ([...source.classList].includes('rich-diff-level-one')) {
91 | // When code block is a diff, we need to remove all `
` elements.
92 | // Note: we leave the block visible in this case, as the graph doesn't
93 | // display all the information
94 | const sourceClone = source.cloneNode(true)
95 | sourceClone.querySelectorAll('del').forEach(del => del.parentElement.removeChild(del))
96 | code = sourceClone.textContent
97 | } else {
98 | code = source.textContent
99 | source.style.display = 'none'
100 | }
101 |
102 | render(code, target, id)
103 | } catch (error) {
104 | renderError(error.message, target)
105 | throw error
106 | }
107 | return target
108 | }
109 |
110 | /**
111 | * Process all `pre[lang="mermaid"]` elements that don't have
112 | * `[data-processed="true"]`.
113 | * @param {Iterator} idIterator Id iterator
114 | */
115 | function processUnprocessedElements(idIterator) {
116 | const selector = 'pre[lang="mermaid"]:not([data-processed])';
117 | [...document.querySelectorAll(selector)].forEach(source => {
118 | source.setAttribute('data-processed', 'true')
119 | const target = processElement(source, idIterator.next().value)
120 | })
121 | }
122 |
123 | // Mermaid setup
124 | // Read more: https://mermaidjs.github.io/mermaidAPI.html#configuration
125 | mermaidAPI.initialize({
126 | startOnLoad: false
127 | })
128 |
129 | const globalIdIterator = idGenerator()
130 |
131 | // Observe nodeList and attribute changes on the page, and
132 | // process all unprocessed elements on the page.
133 | new MutationObserver(
134 | () => processUnprocessedElements(globalIdIterator)
135 | ).observe(
136 | document.body,
137 | { childList: true, subtree: true }
138 | )
139 |
140 | // Initial pass
141 | processUnprocessedElements(globalIdIterator)
142 |
--------------------------------------------------------------------------------
/gulpfile.babel.js:
--------------------------------------------------------------------------------
1 | import del from 'del';
2 | import fs from 'fs';
3 | import gulp from 'gulp';
4 | import gulpIf from 'gulp-if'
5 | import livereload from 'gulp-livereload'
6 | import mergeJson from 'gulp-merge-json'
7 | import plumber from 'gulp-plumber'
8 | import sass from 'gulp-sass'
9 | import zip from 'gulp-zip'
10 | import { merge } from 'event-stream'
11 | import browserify from 'browserify';
12 | import source from 'vinyl-source-stream';
13 | import buffer from 'vinyl-buffer';
14 | import preprocessify from 'preprocessify';
15 |
16 | const production = process.env.NODE_ENV === 'production';
17 | const target = process.env.TARGET || 'chrome';
18 | const environment = process.env.NODE_ENV || 'development';
19 |
20 | const generic = JSON.parse(fs.readFileSync(`./config/${environment}.json`));
21 | const specific = JSON.parse(fs.readFileSync(`./config/${target}.json`));
22 | const context = Object.assign({}, generic, specific);
23 |
24 | const manifest = {
25 | dev: {
26 | background: {
27 | scripts: [
28 | 'scripts/livereload.js',
29 | 'scripts/background.js'
30 | ]
31 | }
32 | },
33 |
34 | firefox: {
35 | applications: {
36 | gecko: {
37 | id: 'github-mermaid-extension@amercier.com'
38 | }
39 | }
40 | }
41 | }
42 |
43 | gulp.task('clean:build', () => del(`./build/${target}`))
44 | gulp.task('clean:dist', () => del(`./dist/${target}.zip`))
45 |
46 | gulp.task('styles', () =>
47 | gulp.src('src/styles/**/*.scss')
48 | .pipe(plumber())
49 | .pipe(sass.sync({
50 | outputStyle: 'expanded',
51 | precision: 10,
52 | includePaths: ['.']
53 | }).on('error', sass.logError))
54 | .pipe(gulp.dest(`build/${target}/styles`))
55 | );
56 |
57 | gulp.task('manifest', () =>
58 | gulp.src('./manifest.json')
59 | .pipe(gulpIf(!production, mergeJson({
60 | fileName: 'manifest.json',
61 | jsonSpace: ' '.repeat(4),
62 | endObj: manifest.dev
63 | })))
64 | .pipe(gulpIf(target === 'firefox', mergeJson({
65 | fileName: 'manifest.json',
66 | jsonSpace: ' '.repeat(4),
67 | endObj: manifest.firefox
68 | })))
69 | .pipe(gulp.dest(`./build/${target}`))
70 | );
71 |
72 | const scripts = [
73 | 'background.js',
74 | 'contentscript.js',
75 | 'options.js',
76 | 'popup.js',
77 | 'livereload.js'
78 | ]
79 |
80 | scripts.forEach(script => {
81 | gulp.task(`scripts:${script}`, () =>
82 | browserify({
83 | entries: 'src/scripts/' + script,
84 | debug: !production,
85 | })
86 | .transform('babelify', {
87 | presets: [
88 | [
89 | '@babel/env', {
90 | targets: {
91 | browsers: ['last 2 versions', 'safari >= 7']
92 | },
93 | useBuiltIns: false
94 | }
95 | ]
96 | ]
97 | })
98 | .transform(preprocessify, {
99 | includeExtensions: ['.js'],
100 | context: context
101 | })
102 | .bundle()
103 | .pipe(source(script))
104 | .pipe(buffer())
105 | .pipe(gulp.dest(`build/${target}/scripts`))
106 | )
107 | })
108 |
109 | gulp.task('scripts', gulp.parallel(
110 | ...scripts.map(script => `scripts:${script}`)
111 | ))
112 |
113 | const resources = [
114 | ['icons', './src/icons/**/*', `./build/${target}/icons`],
115 | ['locales', './src/_locales/**/*', `./build/${target}/_locales`],
116 | ['images', `./src/images/${target}/**/*`, `./build/${target}/images`],
117 | ['shared-images', './src/images/shared/**/*', `./build/${target}/images`],
118 | ['html', './src/**/*.html', `./build/${target}`],
119 | ]
120 |
121 | resources.forEach(([name, src, dest]) => {
122 | gulp.task(
123 | `resources:${name}`,
124 | () => gulp.src(src).pipe(gulp.dest(dest))
125 | )
126 | })
127 |
128 | gulp.task('resources', gulp.parallel(
129 | ...resources.map(([name]) => `resources:${name}`))
130 | )
131 |
132 | gulp.task('extension', gulp.parallel(
133 | 'manifest',
134 | 'scripts',
135 | 'styles',
136 | 'resources'
137 | ))
138 |
139 | gulp.task('build', gulp.series('clean:build', 'extension'))
140 |
141 | gulp.task('livereload', () => {
142 | livereload.listen();
143 | gulp.watch('./src/**/*', gulp.series('build'))
144 | })
145 |
146 | gulp.task('watch', gulp.series(
147 | 'build',
148 | 'livereload',
149 | ));
150 |
151 | gulp.task('zip', () =>
152 | gulp
153 | .src(`./build/${target}/**/*`)
154 | .pipe(zip(`${target}.zip`))
155 | .pipe(gulp.dest('dist'))
156 | )
157 |
158 | gulp.task('dist', gulp.series(
159 | 'build',
160 | 'clean:dist',
161 | 'zip'
162 | ));
163 |
164 | gulp.task('default', gulp.series('build'))
165 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | Github + Mermaid
4 |
5 |
6 |
7 |
8 | A browser extension for Chrome, Opera & Firefox that adds
9 | 
10 | Mermaid
11 | language support to
12 | 
13 | Github Markdown.
14 |
15 |
16 |
46 |
47 | ## Install
48 |
49 | - 
**Google Chrome**: [GitHub + Mermaid - Chrome Web Store](https://chrome.google.com/webstore/detail/github-%20-mermaid/goiiopgdnkogdbjmncgedmgpoajilohe)
50 | - 
**Firefox**: [GitHub + Mermaid - Firefox Add-ons](https://addons.mozilla.org/en-GB/firefox/addon/github-mermaid/)
51 | - 
**Opera**: coming later
52 |
53 | ## Features
54 |
55 | ### Supported GitHub features
56 |
57 | - [x] Pull requests & issues description (preview + published) - [Demo](https://github.com/BackMarket/github-mermaid-extension/issues/1)
58 | - [x] Pull requests & issues comment (preview + published)
59 | - [x] Markdown (`.md`) files (diff + published)
60 | - [x] Gists - [Demo](https://gist.github.com/amercier/df2e07a994315d323e398120bdda3989)
61 |
62 | ### Diagram types
63 |
64 | #### Flowcharts
65 |
66 | 
67 |
68 |
69 | Show source code
70 |
71 | ```
72 | ```mermaid
73 | graph LR
74 |
75 | A(Start)
76 |
77 | A --> B[Look for an item]
78 |
79 | B --> C{Did you find it?}
80 | C -->|Yes| D(Stop looking)
81 | C -->|No| E{Do you need it?}
82 | E -->|Yes| B
83 | E -->|No| D
84 | ```
85 |
86 |
87 | #### Sequence Diagrams
88 |
89 | 
90 |
91 |
92 | Show source code
93 |
94 | ```
95 | ```mermaid
96 | sequenceDiagram
97 | participant U as User
98 | participant C as Client
99 | participant S as Server
100 | participant DB as Database
101 |
102 | U ->> C: Fill username
103 | U ->> C: Fill password
104 | C ->> U: Enable "Login" button
105 | U ->> C: Click "Login" button
106 | C ->>+ S: POST /login
107 | S ->>+ DB: SELECT FROM users
108 | Note over S,DB: See login.py for impl. details
109 | DB -->>- S: results
110 | S -->>- C: { authenticated: true }
111 | C ->> U: redirect /home
112 | ```
113 |
114 |
115 | #### Gantt Diagrams
116 |
117 | 
118 |
119 |
120 | Show source code
121 |
122 | ```
123 | ```mermaid
124 | gantt
125 | title A Gantt Diagram
126 | dateFormat YYYY-MM-DD
127 | section Section
128 | A task :a1, 2014-01-01, 30d
129 | Another task :after a1 , 20d
130 | section Another
131 | Task in sec :2014-01-12 , 12d
132 | another task : 24d
133 | ```
134 |
135 |
136 | ## How to use
137 |
138 | Simply put Mermaid code into ```mermaid. See
139 | [Mermaid official website](https://mermaidjs.github.io/gantt.html) for more
140 | information about the Mermaid syntax.
141 |
142 | ## Roadmap
143 |
144 | - [x] Initial implementation
145 | - [x] Publish Chrome extension
146 | - [x] Documentation
147 | - [x] Publish Firefox extension
148 | - [ ] Publish Opera extension
149 | - [x] Continuous Integration
150 | - [x] Upgrade dependencies
151 | - [x] Automatic dependency management
152 | - [x] Fix #3
153 | - [ ] Testing
154 | - [ ] Dark theme + option page
155 | - [ ] Cleanup
156 |
157 | ## License
158 |
159 | [](/LICENSE.md)
160 |
161 | ## Contributing
162 |
163 | Contributions (issues ♥, pull requests ♥♥♥) are more than welcome! Feel free to clone, fork, modify, extend, etc.
164 |
165 | See [contributing intructions](/CONTRIBUTING.md) for details.
166 |
--------------------------------------------------------------------------------
/resources/icons/firefox.svg:
--------------------------------------------------------------------------------
1 |
139 |
--------------------------------------------------------------------------------