Git Product home page Git Product logo

vim-sequence-diagram's Introduction

Vim Sequence-diagram Preview

Intro

A Vim plugin for previewing sequence diagram in a browser. It's inspired by vim-markdown-preview and JS Sequence Diagram.

JS Sequence Diagram is awesome! And its online editing feature is cool as well. However, there're 2 drawbacks:

  1. Online editing is opt to be lost, especially with an unexpected browser fresh or history-back.
  2. You have to copy&paste between the online web page and your text editor repeatedly for updating/preview.

This vim plugin helps you handle the issues above, write your sequence diagram description in vim, press a hotkey to preview it in browser! Screenshot

Installation

  • With Pathogen: Place vim-sequnce-diagram/ in .vim/bundle/.
  • With Vundle:
    • Add Plugin 'xavierchow/vim-sequence-diagram' to your .vimrc.
    • Launch vim and run :PluginInstall

Usage

File extension

This plugin only applies to files with .seq or .sequence file extension, that means it has nearly no performance impact on other file types.

Note: Make sure you have renamed the file name with proper extension.

Keymap for preview

The default keymap is <leader>t, it brings up a browser window and shows the sequence diagram for you. You can also define your keymap in vimrc.

nmap <unique> <leader>t <Plug>GenerateDiagram 

JS Sequence Diagram Theme

Currently there're mainly 2 themes with js-sequence-diagrams, hand drawn and simple. You can add the following line into your vimrc for using hand drawn theme, set it to 0 or remove the line for simple theme.

let g:generate_diagram_theme_hand = 1

Download as SVG or PNG

Use the buttons at the bottom to download the diagram as SVG or PNG.

License

MIT

vim-sequence-diagram's People

Contributors

felixcuello avatar jamesruan avatar quafzi avatar xavierchow avatar zhaozg avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

vim-sequence-diagram's Issues

I'd like to remap to another combination

I'm always getting this when starting vim:

Error detected while processing /home/vivo/.vim/plugged/vim-sequence-diagram/plugin/vim-sequence-diagram.vim:
line   16:
E227: mapping already exists for \t

I've tried to remap it on the vimrc but it does not solve the issue:

nmap <unique> <leader>sd <Plug>GenerateDiagram

Browser will not open on linux KDE google-chrome

When I press the +'', the files are generated in 'file:///tmp/vim-js-seq' (which takes me a while to find), but the HTML file is not open automatically as expected.

I'm on linux, and using google-chrome on KDE as my main browser.

Is it good to have a download button for the generated svg in browser?

I'm using this for generating diagram for documentation. But it is a tedious work to open developer mode and copy the svg element out and paste it into a svg file manually.

Is it good to have a download button for that, or anything equivalent method that help saving previewed svg?

neovim - nothing happens when using map

I tried default as well as remapping based on the README but nothing happens when triggering the map that call Generate_diagram.

I tried :call vim_seq_diag#Generate_diagram("PATH") and it indeed generates a file in /tmp/.... My vim knowledge is lacking in a clear path forward. Any suggestions? There isn't any vim output when the map gets hit so I'm not sure what info I could provide to help here.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.