Quiver的使用

quiver笔记基本tips

1. 整洁
2. 内容正确

3. 内容全面

   可以在 finder 里面 直接复制 文件名 就可以 在quiver 中使用。

有零散的笔记，零时笔记，都放入， Inbox 里面。

以后慢慢 整理成体系 ， Inbox 应该是最重初的内容，也应该是最多的笔记。
切记。

零散笔记，都应该放入inbox 里面.

个人整理笔记布局方法，把每一个cell看作是 单一功能的函数好好，利用锚点定位，有利于以后整理，可读性是第一位的。

MWeb 排名 appshoper

markdown syntax

Cmd Markdown 简明语法手册

加 Tag

输入文字后按回车就能加标签 tag.

颜色控制

{
  "mainWindow": {
    "divider": {
      "topColor": "#576071",
      "middleColor": "#576071",
      "bottomColor": "#576071"
    }
  },
  "sidebar": {
    "topBar": {
      "backgroundColor": "#434a58",
      "bottomBorderColor": "#434a58",
      "segmentedControl": {
        "tintColor": "#dcdfe5",
        "borderWidth": 1,
        "borderRadius": 3
      }
    },
    "table": {
      "backgroundColor": "#434a58",
      "textColor": "#ccc",
      "selectedTextColor": "#fff",
      "emphasizedTextColor": "#eee",
      "iconColor": "#aaa",
      "selectedIconColor": "#fff",
      "emphasizedIconColor": "#eee",
      "selectedRowBgColor": "#3a404d",
      "emphasizedRowBgColor": "#3a404d"
    },
    "bottomBar": {
      "backgroundColor": "#434a58",
      "topBorderColor": "#434a58",
      "textColor": "#ccc",
      "controlColor": "#ccc",
      "pressedControlColor": "#fff"
    }
  },
  "noteList": {
    "topBar": {
      "backgroundColor": "#434a58",
      "bottomBorderColor": "#434a58",
      "controlColor": "#aaa",
      "pressedControlColor": "#fff"
    },
    "tableHeader": {
      "backgroundColor": "#434a58",
      "bottomBorderColor": "#576071",
      "controlColor": "#aaa",
      "pressedControlColor": "#fff"
    },
    "table": {
      "backgroundColor": "#434a58",
      "separatorColor": "#576071",
      "textColor": "#ccc",
      "selectedTextColor": "#fff",
      "emphasizedTextColor": "#eee",
      "detailColor": "#999",
      "selectedDetailColor": "#999",
      "emphasizedDetailColor": "#eee",
      "iconColor": "#999",
      "selectedIconColor": "#999",
      "emphasizedIconColor": "#eee",
      "rowBgColor": "#434a58",
      "altRowBgColor": "#434a58",
      "selectedRowBgColor": "#3a404d",
      "emphasizedRowBgColor": "#3a404d",
      "draggedRowBgColor": "#3a404d",
      "emptyTextColor": "#999"
    },
    "bottomBar": {
      "backgroundColor": "#434a58",
      "searchField": {
        "textColor": "#ccc",
        "controlColor": "#ccc",
        "pressedControlColor": "#fff",
        "backgroundColor": "#434a58",
        "borderColor": "#576071",
        "placeholderColor": "#999"
      }
    }
  },
  "noteView": {
    "backgroundColor": "#393f4b",
    "dividerColor": "#576071",
    "topBar": {
      "backgroundColor": "#434a58",
      "bottomBorderColor": "#576071",
      "controlColor": "#ccc",
      "pressedControlColor": "#fff",
      "segmentedControl": {
        "tintColor": "#dcdfe5",
        "borderWidth": 1,
        "borderRadius": 3
      }
    },
    "toolbar": {
      "backgroundColor": "#393f4b",
      "dividerColor": "#4d535d",
      "middleDividerColor": "#393f4b",
      "controlColor": "#aaa",
      "pressedControlColor": "#fff",
      "iconColor": "#aaa",
      "textColor": "#999",
      "popUpButton": {
        "titleColor": "#c7c7c7",
        "borderColor": "#434a58"
      },
      "tagField": {
        "textColor": "#ccc",
        "placeholderColor": "#999",
        "tag": {
          "textColor": "#ccc",
          "selectedTextColor": "#fff",
          "backgroundColor": "#576071",
          "selectedBackgroundColor": "#576071",
          "borderRadius": 2
        }
      },
      "formatBar": {
        "controlColor": "#576071",
        "highlightColor": "#fff"
      },
      "searchField": {
        "textColor": "#999",
        "controlColor": "#ccc",
        "pressedControlColor": "#fff",
        "backgroundColor": "#393f4b",
        "borderColor": "#4d535d",
        "placeholderColor": "#999"
      },
      "doneButton": {
        "textColor": "#a5a5a5",
        "highlightBackgroundColor": "#3a3a3a",
        "borderColor": "#4d535d"
      }
    },
    "bottomBar": {
      "backgroundColor": "#434a58",
      "controlColor": "#aaa",
      "pressedControlColor": "#fff"
    }
  },
  "multiNote": {
    "backgroundColor": "#343a40",
    "textColor": "#fff",
    "button": {
      "tintColor": "#3a404d",
      "highlightColor": "#1F1F1F",
      "backgroundColor": "#dcdfe5",
      "highlightBackgroundColor": "#D2D3D3",
      "borderColor": "#dcdfe5",
      "highlightBorderColor": "#dcdfe5"
    },
    "tagField": {
      "textColor": "#ccc",
      "placeholderColor": "#999",
      "backgroundColor": "#31373d",
      "borderColor": "#434a58",
      "borderRadius": 2,
      "tag": {
        "textColor": "#ccc",
        "selectedTextColor": "#fff",
        "backgroundColor": "#576071",
        "selectedBackgroundColor": "#576071",
        "borderRadius": 2
      }
    }
  },
  "notebookPicker": {
    "backgroundColor": "#434a58",
    "textColor": "#fff",
    "dividerColor": "#576071",
    "searchField": {
      "textColor": "#ccc",
      "controlColor": "#999",
      "pressedControlColor": "#fff",
      "backgroundColor": "#434a58",
      "borderColor": "#576071",
      "placeholderColor": "#999"
    },
    "table": {
      "textColor": "#ccc",
      "selectedTextColor": "#fff",
      "emphasizedTextColor": "#eee",
      "iconColor": "#ccc",
      "selectedIconColor": "#fff",
      "emphasizedIconColor": "#eee",
      "selectedRowBgColor": "#3a404d",
      "emphasizedRowBgColor": "#3a404d",
      "emptyTextColor": "#ccc"
    }
  },
  "searchView": {
    "backgroundColor": "#434a58",
    "searchField": {
      "textColor": "#fff",
      "controlColor": "#999",
      "pressedControlColor": "#999",
      "backgroundColor": "#434a58",
      "borderColor": "#576071",
      "placeholderColor": "#999"
    },
    "tableHeader": {
      "backgroundColor": "#434a58",
      "topBorderColor": "#434a58",
      "bottomBorderColor": "#576071",
      "textColor": "#576071",
      "controlColor": "#999",
      "pressedControlColor": "#fff"
    },
    "table": {
      "separatorColor": "#576071",
      "textColor": "#ccc",
      "selectedTextColor": "#fff",
      "emphasizedTextColor": "#eee",
      "detailColor": "#999",
      "selectedDetailColor": "#ddd",
      "emphasizedDetailColor": "#eee",
      "iconColor": "#999",
      "selectedIconColor": "#ddd",
      "emphasizedIconColor": "#eee",
      "rowBgColor": "#434a58",
      "altRowBgColor": "#434a58",
      "selectedRowBgColor": "#3a404d",
      "emphasizedRowBgColor": "#3a404d",
      "emptyTextColor": "#ccc"
    }
  },
  "presentation": {
    "backgroundColor": "#393f4b"
  },
  "editor": {
    "codeCellTheme": "tomorrow_night_eighties",
    "markdownCellTheme": "tomorrow_night_eighties"
  },
  "css": {
    "className": "spacegray",
    "editor": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(255,255,255,.1)}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#ccc!important;background-color:transparent!important}.spacegray .diagram-cell .ace_editor,.spacegray .latex-cell .ace_editor,.spacegray .markdown-cell .ace_editor{color:#c7c7c7;background-color:#393f4b}.spacegray .markdown-cell .ace_list{color:#c7c7c7}.spacegray .cell.inEditMode{border-color:#576071;}",
    /*  预览 */
    /* spacygray.code{background-color:rgba(0,0,0,1)} 代码 `代码` 的背影颜色
    .spacygray.strongObackground-color:rgba(1,1,255,.1);color:#00FF00} 字体颜色是绿色，背景颜色是不透明度为0.1的颜色*/
    
    "preview": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(0,0,0,1)}.spacegray strong{background-color:rgba(1,1,255,.1);color:#00FF00}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#c7c7c7!important;background-color:transparent!important}.spacegray #tag-field{margin:8px 2px;}.spacegray #tag-field .tag{background:#576071;border-radius:2px;color:#ccc;}",
    "presentation": ".spacegray{color:#ddd}.spacegray a{color:#fff}.spacegray table tr:nth-child(even){background-color:#434a58}.spacegray table th{background:#2b3137}.spacegray table td,.spacegray table th{border-color:#576071}.spacegray blockquote{color:#fff}.spacegray hr{background-color:#576071}.spacegray code{background-color:rgba(255,255,255,.1)}.spacegray svg{background-color:#fff}.spacegray .text-cell [style]{color:#c7c7c7!important;background-color:transparent!important}"
  }
}

short cut

Command + Opition + “↑” 当前cell向上移动

鼠标

double click notelist title 单独成一个window

中间

自己在 markdown上看到 center 必须在前 是不是 符合css 位置 大小 内容 动画 其它的路子？

这个是在简书上看到的， 一个markdown 语法。

http://www.jianshu.com/p/5e1690ffede6

亲测 以上语法不支持 Github ，目前支持 Quiver. 自己用sublime 测试markdown 预览 github 加<mark>对效果没有影响，挺好. 可以放心用这个标记了

印象笔记互动

另外在预览页面全选，还可以用服务导入到 evernote

作者：阿阿阿面
链接：https://www.zhihu.com/question/28886671/answer/76360988
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
另外在预览页面全选，还可以用服务导入到 evernote

为了省时间以后还是多用OmniGraffle

测试网上的流程图md 语法

笔记跳转 演示 以下两个是同一个地址

个人流程图 展示

Ajax 分页

GitHub writer

Symbols that should possibly not be used in the text: ‘=>’ and ‘->’ and ‘:>’ and ‘|’

定义元素阶段的语法是
tag=>type: content:>url
tag就是一个标签，在第二段连接元素时用
type是这个标签的类型，从上段内容看有6中类型，非别为：

start
end
operation
subroutine
condition
inputoutput
content就是在框框中要写的内容，中英文均可，但有一点需要特别注意，就是type后的冒号与文本之间一定要有个空格，没空格会出问题。
url就是一个连接，与框框中的文本相绑定

连接元素阶段的语法就简单多了，直接用->来连接两个元素，需要注意的是condition类型，因为他有yes和no两个分支，所以要写成

c2(yes)->io->e
c2(no)->op2->e
这样的格式。

st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...

st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1

从网上找了很久关于markdown语法的文章，机会微乎其微，大多所指向的都是同一个页面https://github.com/adrai/flowchart.js
这是github上的一个开源项目，里面对我有用的只有一小段文字

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes 
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)-\>cond
cond(yes, right)-\>c2
cond(no)-\>sub1(left)-\>op1
c2(yes)-\>io->e
c2(no)-\>op2->e

* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16

* 1
* 2
* 3
* 4
* 5
* 6
* 7
* 8
* 9
* 10
* 11
* 12
* 13
* 14
* 15
* 16

由于墙的原因，也没法找到什么有用的外文资料，只能总结一下此段代码里面的语法了。
流程图的语法大体分为两段，第一段用来定义元素，第二段用来连接元素
定义元素阶段的语法是
tag=>type: content:>url
tag就是一个标签，在第二段连接元素时用
type是这个标签的类型，从上段内容看有6中类型，非别为：

start
end
operation
subroutine
condition
inputoutput

content就是在框框中要写的内容，中英文均可，但有一点需要特别注意，就是type后的冒号与文本之间一定要有个空格，没空格会出问题。
url就是一个连接，与框框中的文本相绑定

连接元素阶段的语法就简单多了，直接用->来连接两个元素，需要注意的是condition类型，因为他有yes和no两个分支，所以要写成

c2(yes)->io->e
c2(no)->op2->e

这样的格式。
下面为显示情况如果IE浏览器显示不好，可以使用chrome试试。

st=>start: Start|past:>http://www.google.com[blank]
e=>end: End:>http://www.google.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes 
or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2(right)->e

Markdown流程图语法

字数272 阅读525 评论1 喜欢1

概述流程图的语法大致分为两部分。

• 定义元素
• 连接元素

定义元素

tag=>type: content:>url

1. tag：标签，用于连接元素时使用

2. type：该标签的类型。共有6种类型如下：

   start
   end
   operation
   subroutine
   condition
   inputoutput

3. content：流程语句中放置的内容

   • type:与content之间一定要有一个空格，否则会出问题！

4.url：链接，与流程语句绑定

连接元素

使用->符号，如：

c2(yes)->io->e
c2(no)->op2->e

实例

牢记tag=>type: content:>url

st=>start: Start|past:>http://www.baidu.com
e=>end: End:>http://www.baidu.com
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes or No?|approved:>http://www.baidu.com
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|request

st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e

switch 流程图画法

 s=>start: 开始
 
 输入=>inputoutput: 输入一个值

求余=>operation: 判断除以5的余数 赋值给i


判断0=>condition: 余数===0？
判断1=>condition: 余数===1？
判断2=>condition: 余数===2？

判断3=>condition: 余数===3?
判断4=>condition: 余数===4?


输出0=>inputoutput: 输出余数0

输出1=>inputoutput: 输出余数1

输出2=>inputoutput: 输出余数2

输出3=>inputoutput: 输出余数3

输出4=>inputoutput: 输出余数4



函数0=>subroutine: 执行函数0

函数1=>subroutine: 执行函数1

函数2=>subroutine: 执行函数2

函数3=>subroutine: 执行函数3|current

函数4=>subroutine: 执行函数4


op2=>operation: Stuff|current


e=>end: 结束


s->求余
求余->判断2(yes)->输出2->函数2->e
判断0(no)->判断1(yes)->输出1->函数1->e
判断1(no)->判断3(yes)->输出3->函数3->e
判断2(no)->判断0(yes)->输出0->函数0->e
判断3(no)->判断4(yes)->输出4->函数4->e

Quiber实现技巧

st->op1(right)->cond （一个流程后面可以跟小括号+英文方向值）

注意

s->写Node后台(yes)->后台->测试node服务器搭建->后台?(yes)->写客户端(yes)->客户端基本页面实现->页面?(yes)->客户端jsAjax网络交互->Ajax?(yes)->客户端JS页面点操作->页面事件?
页面事件?(yes)->成功->实现需求
页面事件?(no)->客户端JS页面点操作
Ajax?(no)->客户端jsAjax网络交互
页面?(no)->客户端基本页面实现
后台?(no)->后台

!!!
流程连线 尽量不要换行不要有多余的 \s 要不然会出问题的
流程图不能显示完整

不能导出完整的流程图 需要特别注意 PDF

流程图技巧http://chuansong.me/n/384012849440

MarkDown 是一门轻量级标记语言，深受喜欢写作和程序员的喜欢。具有良好的排版设计，专心写作；语法高亮、全键盘操作、学习成本低等等优点。过去推送的文章，我我都是在 MarkDown 上面完成，然后保存在印象笔记上面，再贴到微信公众号上，基本不用再去调整页面的排版问题。

MarkDown 语法的学习成本非常的低，只需要找一篇教程学习十几分钟就可以用它来写文章了。很多人都是用 MarkDown 进行写作，所以掌握了基本的排版语法就可以了。但是 MarkDown 还有一些比较少用到的功能，比如流程图等等。因为网络上面的很多教程并没有针对流程图作很详细的讲解，所以很多人不太理解 MarkDown 流程图的语法实际含义，所以今天就来写写 MarkDown 的流程图。

流程图我们经常见，专门专对流程图的工具也很多，我们甚至完全不需要用 MarkDown 画流程图，只需要用流程图软件完成之后生成图片贴上去就可以了。但是在 MarkDown 作流程图还是有好处的，第一是针对简单的流程图比较方便，直接生成；第二是可以强化做流程图的思维和思路。

MarkDown 流程图语法主要由三部分组成，流程图语块定义、流程图符号声明和流程处理。下面是一个简单的流程图示例，通过示例讲解一个流程图各个组成部分。

st=>start: 开始 
op1=>operation: My Operation 
c=>condition: Yes or No? 
e=>end: 结束

st->op1->c
c(yes)->e
c(no)->op1

生成流程图的实际效果如下：

第一部分，流程图语块的定义。在 MarkDown 语法里面，可以像定义代码块一样定义一段内容为流程图（Flow chart）。具体操作就是将流程图语法内容写在

和 ```里面，即为 ```flow 流程图具体语法 ```

第二部分就是关于流程图符号的声明，流程图符号主要有六种，分别是：

start，用来声明流程图的开始；
end，用来声明流程图的结束；
condition，用来声明流程图的判断；
operation、 subroutine 和 inputoutput 分别对应的是长方形、子程序和四边形。这三个符号没有太多的特殊含义，使用最多的是长方形，简单的流程图来说没有必要使用太复杂的图形。
示例当中的流程图的符号声明就是下面这部分

st=>start: 开始     //定义流程图的开始
op1=>operation: My Operation      //定义一个长方形的流程框
c=>condition: Yes or No?       //定义一个判断
e=>end: 结束          //定义流程图结束
第三部分就是流程处理。所谓的流程处理就是将上面的这些符号进行串联，实现一个完成的流程图。假如整个流程图是没有分支（没有判断）的话那就是直接连接，如果有分支，那就根据 Yes 和 No 执行不同的步骤。

st->op1->c  //从开始到长方形再到判断
c(yes)->e  //判断为真的时候执行分支
c(no)->op1 //判断为假的时候执行分支
流程图基本的语法就是这些，除此之外，还可以通过（right，left，top，bottom）这四个方向在流程图处理的时候来调整流程的的方式，比如下面的语法生成的流程图方向是这样的：

``` flow    
st=>start: 开始
op1=>operation: My Operation
c=>condition: Yes or No?
e=>end: 结束

st(right)->op1(right)->c
c(yes,right)->e
c(no,top)->op1()

除了调整流程图的方式之外，还可以在流程图符号生面后面加上需要跳转的连接，比如:

st=>start: 开始:>www.google.com

这段代码就是可以给流程图的开始符号添加一个调转连接，但是不是说有的 MarkDown 编辑器都支持这个功能，目前来说像作业部落这些在线编辑器是支持这些功能的。

MarkDown 的流程图语法相对简单，但是想要用好就需要多加练习，强化自己对于流程图的思维能力。使用 MarkDown 制作流程图，就如同程序员使用代码去构建一个个功能一样，看着那些由英文符号转化而来的图形，总能让自己心满意足。

http://chuansong.me/n/384012849440

GitHub 项目 支持

流程图

https://github.com/adrai/flowchart.js

Usage
On your page you need to include raphael like so:

or

npm install flowchart.js
and then

<div id="diagram">Diagram will be placed here</div>
<script src="flowchart.js"></script>
<script>
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
                                'e=>end:>http://www.google.com\n' +
                                'op1=>operation: My Operation\n' +
                                'sub1=>subroutine: My Subroutine\n' +
                                'cond=>condition: Yes \n' +
                                'or No?\n:>http://www.google.com' +
                                'io=>inputoutput|request: catch something...\n' +
                                '' +
                                'st->op1->cond\n' +
                                'cond(yes)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
                                'cond(no)->sub1(right)->op1');// the other symbols too...
  diagram.drawSVG('diagram');

  // you can also try to pass options:

  diagram.drawSVG('diagram', {
                                'x': 0,
                                'y': 0,
                                'line-width': 3,
                                'line-length': 50,
                                'text-margin': 10,
                                'font-size': 14,
                                'font-color': 'black',
                                'line-color': 'black',
                                'element-color': 'black',
                                'fill': 'white',
                                'yes-text': 'yes',
                                'no-text': 'no',
                                'arrow-end': 'block',
                                'scale': 1,
                                // style symbol types
                                'symbols': {
                                    'start': {
                                      'font-color': 'red',
                                      'element-color': 'green',
                                      'fill': 'yellow'
                                    },
                                    'end':{
                                        'class': 'end-element'
                                    }
                                },
                                // even flowstate support ;-)
                                'flowstate' : {
                                    // 'past' : { 'fill' : '#CCCCCC', 'font-size' : 12},
                                    // 'current' : {'fill' : 'yellow', 'font-color' : 'red', 'font-weight' : 'bold'},
                                    // 'future' : { 'fill' : '#FFFF99'},
                                    'request' : { 'fill' : 'blue'}//,
                                    // 'invalid': {'fill' : '#444444'},
                                    // 'approved' : { 'fill' : '#58C4A3', 'font-size' : 12, 'yes-text' : 'APPROVED', 'no-text' : 'n/a' },
                                    // 'rejected' : { 'fill' : '#C45879', 'font-size' : 12, 'yes-text' : 'n/a', 'no-text' : 'REJECTED' }
                                  }
                              });
</script>

Advice

Symbols that should possibly not be used in the text: ‘=>’ and ‘->’ and ‘:>’ and ‘|’

theme

自定义theme路径

/Users/lilonglong/Library/Containers/com.happenapps.Quiver/Data/Library/Application Support/Quiver/Themes